Added Table Component

Enciphered.Blazor.UIComponents.Demo/Components/App.razor

@@ -17,7 +17,6 @@
     </script>
     <link rel="stylesheet" href="_content/Enciphered.Blazor.UIComponents/css/app.css" />
     <link rel="stylesheet" href="@Assets["css/app.css"]" />
-    <link rel="stylesheet" href="@Assets["Enciphered.Blazor.UIComponents.Demo.styles.css"]" />
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="enci_white.svg" />
     <HeadOutlet />

Enciphered.Blazor.UIComponents.Demo/Components/Pages/Weather.razor

@@ -1,4 +1,5 @@
 @page "/weather"
+@using Enciphered.Blazor.UIComponents
 @attribute [StreamRendering]
 
 <PageTitle>Weather</PageTitle>
@@ -13,27 +14,20 @@
 }
 else
 {
-    <table class="table">
+    <Table Items="forecasts">
-        <thead>
+        <Columns>
-            <tr>
+            <th>Date</th>
-                <th>Date</th>
+            <th aria-label="Temperature in Celsius">Temp. (C)</th>
-                <th aria-label="Temperature in Celsius">Temp. (C)</th>
+            <th aria-label="Temperature in Farenheit">Temp. (F)</th>
-                <th aria-label="Temperature in Farenheit">Temp. (F)</th>
+            <th>Summary</th>
-                <th>Summary</th>
+        </Columns>
-            </tr>
+        <RowTemplate Context="forecast">
-        </thead>
+            <td>@forecast.Date.ToShortDateString()</td>
-        <tbody>
+            <td>@forecast.TemperatureC</td>
-            @foreach (var forecast in forecasts)
+            <td>@forecast.TemperatureF</td>
-            {
+            <td>@forecast.Summary</td>
-                <tr>
+        </RowTemplate>
-                    <td>@forecast.Date.ToShortDateString()</td>
+    </Table>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
 }
 
 @code {

Enciphered.Blazor.UIComponents/Enciphered.Blazor.UIComponents.csproj

@@ -5,8 +5,20 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <PublishAot>true</PublishAot>
-  </PropertyGroup>
 
+    <IsPackable>true</IsPackable>
+    <PackageId>Enciphered.Blazor.UIComponents</PackageId>
+    <Version>0.0.1</Version>
+    <Authors>shaamilahmed</Authors>
+    <Company>nciphered</Company>
+    <Description>Pure static SSR Blazor component library styled with Tailwind CSS v4 and shadcn/ui. All interactivity powered by vanilla JS. htmx-powered form validation.</Description>
+    <PackageTags>blazor;ui;components;tailwind;htmx;ssr;static</PackageTags>
+    <RepositoryUrl>https://git.nciphered.com/shaamilahmed/Enciphered.Blazor.UIComponents</RepositoryUrl>
+    <PackageLicenseExpression></PackageLicenseExpression>
+    <PackageProjectUrl>https://git.nciphered.com/shaamilahmed/Enciphered.Blazor.UIComponents</PackageProjectUrl>
+    <PackageIcon>enci_white.png</PackageIcon>
+  </PropertyGroup>
+  
   <Target Name="TailwindBuild" BeforeTargets="Build">
     <Exec Command="npx @tailwindcss/cli -i Styles/app.css -o wwwroot/css/app.css --minify" />
   </Target>
@@ -16,4 +28,8 @@
     <FrameworkReference Include="Microsoft.AspNetCore.App" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Include="./Logo/enci_white.png" Pack="true" PackagePath="\" />
+  </ItemGroup>
+
 </Project>

Enciphered.Blazor.UIComponents/Tables/Table.razor

@@ -0,0 +1,26 @@
+@namespace Enciphered.Blazor.UIComponents
+@typeparam TItem
+
+<div class="w-full overflow-auto rounded-md border border-zinc-800">
+    <table class="w-full caption-bottom text-sm">
+        <thead class="bg-zinc-900/50">
+            <tr class="border-b border-zinc-800 transition-colors">
+                @Columns
+            </tr>
+        </thead>
+        <tbody class="[&_tr:last-child]:border-0">
+            @foreach (TItem item in Items)
+            {
+                <tr class="border-b border-zinc-800 transition-colors hover:bg-zinc-900/50 text-center">
+                    @RowTemplate(item)
+                </tr>
+            }
+        </tbody>
+    </table>
+</div>
+
+@code {
+    [Parameter] public required IReadOnlyList<TItem> Items { get; set; }
+    [Parameter] public required RenderFragment Columns { get; set; }
+    [Parameter] public required RenderFragment<TItem> RowTemplate { get; set; }
+}