Create NejBlazor

.gitignore

@@ -0,0 +1,253 @@
+#gitignore for .NET shared projects
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+#Object
+obj/
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio 6 auto-generated project file (contains which files were open etc.)
+*.vbp
+
+# Visual Studio 6 workspace and project file (working project files containing files to include in project)
+*.dsw
+*.dsp
+
+# Visual Studio 6 technical files
+*.ncb
+*.aps
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# Visual Studio History (VSHistory) files
+.vshistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Fody - auto-generated XML schema
+FodyWeavers.xsd
+
+# VS Code files for those working on multiple tools
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# Local History for Visual Studio Code
+.history/
+
+# Windows Installer files from build outputs
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# JetBrains Rider
+*.sln.iml

DataTable/DataTable.razor

@@ -0,0 +1,58 @@
+@namespace Nejcraft.Shared
+@using Nejcraft.Shared.Parts.ButtonParts
+@using Nejcraft.Shared.Parts.InputParts
+@using Nejcraft.Shared.Parts
+
+@typeparam TItem
+
+@inherits NejComponentBase
+
+<div class="flex overflow-x-visible">
+
+	<Nejcraft.Shared.Parts.TableParts.Table Class="@GetCssClass()">
+		<thead class="">
+			<tr>
+				<CascadingValue Value="this">
+					@ChildContent
+				</CascadingValue>
+			</tr>
+		</thead>
+		<tbody class="">
+			@foreach (TItem it in Data ?? Array.Empty<TItem>())
+			{
+				<tr @key=Key?.Invoke(it) class="border-t border-secondary/50">
+
+					@foreach (DataTableCol<TItem> tab in Columns ?? new List<DataTableCol<TItem>>())
+					{
+						<Nejcraft.Shared.Parts.TableParts.TablePart>
+							@tab.ChildContent(it)
+						</Nejcraft.Shared.Parts.TableParts.TablePart>
+					}
+				</tr>
+			}
+		</tbody>
+
+	</Nejcraft.Shared.Parts.TableParts.Table>
+</div>
+
+
+
+@code {
+
+	[Parameter]
+	public IEnumerable<TItem>? Data { get; set; }
+
+	private List<DataTableCol<TItem>> Columns { get; set; } = new List<DataTableCol<TItem>>();
+
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	[Parameter]
+	public Func<TItem, string>? Key { get; set; }
+
+	public void AddColumn(DataTableCol<TItem> item)
+	{
+		Columns.Add(item);
+		InvokeAsync(StateHasChanged);
+	}
+}

DataTable/DataTableCol.razor

@@ -0,0 +1,23 @@
+@namespace Nejcraft.Shared
+@typeparam TItem
+@inherits Nejcraft.Shared.Parts.NejComponentBase
+
+<Nejcraft.Shared.Parts.TableParts.TableHeader Class="@GetCssClass()">
+	@Title
+</Nejcraft.Shared.Parts.TableParts.TableHeader>
+
+@code {
+	[Parameter]
+	public string Title { get; set; } = default!;
+
+	[Parameter]
+	public RenderFragment<TItem> ChildContent { get; set; } = default!;
+
+	[CascadingParameter]
+	public DataTable<TItem> Table { get; set; } = default!;
+
+	protected override void OnInitialized(){
+		base.OnInitialized();
+		Table.AddColumn(this);
+	}
+}

NejBlazor.csproj

@@ -0,0 +1,18 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0" />
+  </ItemGroup>
+
+</Project>

Parts/ButtonParts/Button.cs

@@ -0,0 +1,35 @@
+
+namespace Nejcraft.Shared.Parts.ButtonParts
+{
+    public class Button : ButtonBase
+    {     
+        public override string GetCssClass()
+        {
+            return "px-4 py-2 rounded-lg " + base.GetCssClass();
+        }
+    }
+
+    public class ButtonSmall : ButtonBase
+    {
+        public override string GetCssClass()
+        {
+            return "px-3 py-1 rounded-lg " + base.GetCssClass();
+        }
+    }
+
+    public class ButtonBig : ButtonBase
+    {
+        public override string GetCssClass()
+        {
+            return "px-6 py-4 rounded-lg " + base.GetCssClass();
+        }
+    }
+
+    public class ButtonRound : ButtonBase
+    {
+        public override string GetCssClass()
+        {
+            return "p-2 rounded-full " + base.GetCssClass();
+        }
+    }
+}

Parts/ButtonParts/ButtonBase.razor

@@ -0,0 +1,65 @@
+@using Microsoft.AspNetCore.Components.Web;
+@using Nejcraft.Shared.Parts
+@inherits NejComponentBase
+
+<button @onclick="(x)=>OnClick.InvokeAsync(x)" 
+	class="@Color @HoverColor @DisabledColor 
+			m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150 @GetCssClass()"
+	type="@HtmlButtonType">
+	@ChildContent
+</button>
+
+@code {
+
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+	public enum ButtonType {
+		Normal,
+		Submit,
+		Danger
+	}
+
+	public static Dictionary<ButtonType, Colors.ColorType> ColorMap = new Dictionary<ButtonType, Colors.ColorType>(){
+		{ ButtonType.Submit, Colors.ColorType.Accent },
+		{ ButtonType.Danger, Colors.ColorType.Error }
+	};
+
+	string Color { 
+		get {
+			if (!ColorMap.TryGetValue(Type, out Colors.ColorType col))
+				return "bg-secondary";
+			return Colors.BgColors[col];
+		}
+	}
+
+	string HoverColor
+	{
+		get
+		{
+			if (!ColorMap.TryGetValue(Type, out Colors.ColorType col))
+				return "hover:bg-trinary";
+			return Colors.BgColorsHover[col];
+		}
+	}
+
+	string DisabledColor
+	{
+		get
+		{
+			if (!ColorMap.TryGetValue(Type, out Colors.ColorType col))
+				return "disabled:bg-trinary";
+			return Colors.BgColorsDisabled[col];
+		}
+	}
+
+
+	[Parameter]
+	public ButtonType Type { get; set; }
+
+	[Parameter]
+	public string? HtmlButtonType { get; set; } = "button";
+
+	[Parameter]
+	public EventCallback<MouseEventArgs?> OnClick { get; set; }
+}

Parts/CardParts/Card.razor

@@ -0,0 +1,12 @@
+@using Nejcraft.Shared.Parts
+@inherits NejComponentBase
+
+<div class="relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl @GetCssClass() ">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/CardParts/CardHeader.razor

@@ -0,0 +1,19 @@
+<div class="rounded-t px-6 py-4 pb-2 bg-transparent">
+	<div class="flex flex-wrap items-center">
+		<div class="relative w-full max-w-full flex-grow flex-1">
+			@if (!string.IsNullOrEmpty(Desc))
+			{
+				<h2 class="text-primary text-xl font-semibold">@Desc</h2>
+			}
+		</div>
+		@ChildContent
+	</div>
+</div>
+
+@code {
+	[Parameter]
+	public string? Desc { get; set; }
+
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+}

Parts/Colors.cs

@@ -0,0 +1,64 @@
+namespace Nejcraft.Shared.Parts
+{
+    public class Colors
+    {
+        public enum ColorType
+        {
+            Error,
+            Accent,
+            Accent2,
+            Accent3,
+            Accent4,
+            Accent5,
+        }
+
+        public static Dictionary<ColorType, string> BgColors = new Dictionary<ColorType, string>()
+        {
+            {ColorType.Error, "bg-red-600"},
+            {ColorType.Accent, "bg-accent"}, 
+            {ColorType.Accent2, "bg-accent2"},
+            {ColorType.Accent3, "bg-accent3"},
+            {ColorType.Accent4, "bg-accent4"},
+            {ColorType.Accent5, "bg-accent5"},
+        };
+
+        public static Dictionary<ColorType, string> BgColorsHover = new Dictionary<ColorType, string>()
+        {
+            {ColorType.Error, "hover:bg-red-700"},
+            {ColorType.Accent, "hover:bg-accent-dark"},
+            {ColorType.Accent2, "hover:bg-accent2-dark"},
+            {ColorType.Accent3, "hover:bg-accent3-dark"},
+            {ColorType.Accent4, "hover:bg-accent4-dark"},
+            {ColorType.Accent5, "hover:bg-accent5-dark"},
+        };
+
+        public static Dictionary<ColorType, string> BgColorsDisabled = new Dictionary<ColorType, string>()
+        {
+            {ColorType.Error, "disabled:bg-red-700"},
+            {ColorType.Accent, "disabled:bg-accent-dark"},
+            {ColorType.Accent2, "disabled:bg-accent2-dark"},
+            {ColorType.Accent3, "disabled:bg-accent3-dark"},
+            {ColorType.Accent4, "disabled:bg-accent4-dark"},
+            {ColorType.Accent5, "disabled:bg-accent5-dark"},
+        };
+
+        public static Dictionary<ColorType, string> TextColors = new Dictionary<ColorType, string>()
+        {
+            {ColorType.Error, "text-red-600"},
+            {ColorType.Accent, "text-accent"},
+            {ColorType.Accent2, "text-accent2"},
+            {ColorType.Accent3, "text-accent3"},
+            {ColorType.Accent4, "text-accent4"},
+            {ColorType.Accent5, "text-accent5"},
+        };
+        public static Dictionary<ColorType, string> TextColorsHover = new Dictionary<ColorType, string>()
+        {
+            {ColorType.Error, "hover:text-red-700"},
+            {ColorType.Accent, "hover:text-accent-dark"},
+            {ColorType.Accent2, "hover:text-accent2-dark"},
+            {ColorType.Accent3, "hover:text-accent3-dark"},
+            {ColorType.Accent4, "hover:text-accent4-dark"},
+            {ColorType.Accent5, "hover:text-accent5-dark"},
+        };
+    }
+}

Parts/InputParts/CheckBox.razor

@@ -0,0 +1,23 @@
+<div class="my-1 flex text-secondary">
+	<input type="checkbox" id="@Id" name="@Name" class="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer">
+	@if (!string.IsNullOrEmpty(Title))
+	{
+		<label class="block font-bold px-2">@Title</label>
+	}
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+	[Parameter]
+	public string? Title { get; set; }
+
+	[Parameter]
+	public string? Id { get; set; }
+
+	[Parameter]
+	public string? Name { get; set; }
+
+}

Parts/InputParts/Input.razor

@@ -0,0 +1,34 @@
+<div class="my-1">
+	@if (!string.IsNullOrEmpty(Title))
+	{ 
+			<label class="block text-secondary text-sm font-bold mb-2">@Title</label>	
+		}
+	<input id="@Id" value="@Value" onchange="@onChange" name="@Name" class="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public string? Value { get; set; }
+
+	[Parameter]
+	public EventCallback<string> ValueChanged { get; set; }
+
+	private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
+	{
+		ValueChanged.InvokeAsync(args.Value as string ?? "");
+	}
+
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+	[Parameter]
+	public string? Title { get; set; }
+
+	[Parameter]
+	public string? Id { get; set; }
+
+	[Parameter]
+	public string? Name { get; set; }
+
+}

Parts/InputParts/TextArea.razor

@@ -0,0 +1,24 @@
+<div class="my-1">
+	@if (!string.IsNullOrEmpty(Title))
+	{ 
+			<label class="block text-secondary text-sm font-bold mb-2">@Title</label>	
+		}
+	<textarea id="@Id" name="@Name" class="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150">
+		@ChildContent
+	</textarea>
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+	[Parameter]
+	public string? Title { get; set; }
+
+	[Parameter]
+	public string? Id { get; set; }
+
+	[Parameter]
+	public string? Name { get; set; }
+
+}

Parts/LayoutParts/Full.razor

@@ -0,0 +1,9 @@
+<div class="w-full lg:px-2 py-2">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/LayoutParts/Half.razor

@@ -0,0 +1,9 @@
+<div class="w-full lg:w-6/12 lg:px-2 py-2">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/LayoutParts/Quarter.razor

@@ -0,0 +1,10 @@
+<div class="w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}
+ 

Parts/LayoutParts/Sixth.razor

@@ -0,0 +1,9 @@
+<div class="w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 ">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/LayoutParts/Third.razor

@@ -0,0 +1,9 @@
+<div class="w-full lg:w-4/12 lg:px-2 py-2">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/LayoutParts/TwoThird.razor

@@ -0,0 +1,9 @@
+<div class="w-full lg:w-8/12 lg:px-2 py-2">
+	@ChildContent
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/MiscParts/QrCode.razor

@@ -0,0 +1,21 @@
+@using QRCoder;
+@inherits NejComponentBase
+
+<img class="@GetCssClass()" src=@("data:image/png;base64,"+QrBase64Image)/>
+
+@code {
+    private string QrBase64Image;
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        QRCodeGenerator qrGenerator = new QRCodeGenerator();
+        QRCodeData qrCodeData = qrGenerator.CreateQrCode(QrCodeData, QRCodeGenerator.ECCLevel.Q);
+        PngByteQRCode qrCode = new PngByteQRCode(qrCodeData);
+        QrBase64Image = Convert.ToBase64String(qrCode.GetGraphic(20, false));
+    }
+
+    [Parameter]
+    public string QrCodeData { get; set; }
+}

Parts/Modal.razor

@@ -0,0 +1,18 @@
+@using LayoutParts
+
+@if (IsOpen) {
+	<div class="fixed flex flex-col items-center inset-0 bg-gray-800 bg-opacity-75 z-50 overflow-y-auto lg:py-8">
+		<Nejcraft.Shared.Parts.LayoutParts.Third>
+			@ChildContent
+		</Nejcraft.Shared.Parts.LayoutParts.Third>
+	</div>
+}
+
+@code {
+	[Parameter]
+	public Boolean IsOpen { get; set; }
+
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/NejComponentBase.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Components;
+
+namespace  Nejcraft.Shared.Parts
+{
+	public class NejComponentBase : ComponentBase
+	{
+
+        [Parameter]
+        public string Class { get; set; } = "";
+
+        public virtual string GetCssClass()
+        {
+            return Class;
+        }
+    }
+}

Parts/SidebarParts/GroupNavItem.razor

@@ -0,0 +1,19 @@
+<li>
+	<div class="collapse">
+		<input type="checkbox" class="peer min-h-0" />
+		<div class="flex rounded-lg peer-hover:bg-secondary items-center p-2 w-full text-base font-normal rounded-lg transition duration-75 group collapse-title min-h-0 peer-checked:bg-secondary peer-checked:text-secondary-content">
+			@Title
+		</div>
+		<ul class="space-y-2 collapse-content" style="padding-bottom:0px;padding-top:0.5rem;">
+			@ChildContent
+		</ul>
+	</div>
+</li>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+	[Parameter]
+	public string? Title { get; set; }
+}

Parts/SidebarParts/NavBar.razor

@@ -0,0 +1,12 @@
+<div class="overflow-y-auto py-4 min-h-0 px-3 bg-primary text-secondary rounded">
+	<ul class="space-y-2">
+		@ChildContent
+	</ul>
+</div>
+
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+}

Parts/SidebarParts/NavItem.razor

@@ -0,0 +1,20 @@
+<li>
+    <NavLink href="@Href" ActiveClass="bg-secondary" Match="NavLinkMatch"
+        class="@("flex items-center p-2 text-base font-normal text-secondary cursor-pointer rounded-lg hover:bg-secondary")">
+		@ChildContent
+	</NavLink>
+</li>
+
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; } = default!;
+
+    [Parameter]
+    public string? Href { get; set; }
+    /*
+    [Parameter]
+    public NavLinkMatch NavLinkMatch { get; set; } = NavLinkMatch.All;
+    */
+
+}

Parts/TableParts/Table.razor

@@ -0,0 +1,13 @@
+@using Nejcraft.Shared.Parts
+@inherits NejComponentBase
+
+<div class="block w-full overflow-x-auto text-secondary">
+	<table class="items-center w-full bg-transparent border-collapse @GetCssClass()">
+		@ChildContent
+	</table>
+</div>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+}

Parts/TableParts/TableHeader.razor

@@ -0,0 +1,10 @@
+@inherits NejComponentBase
+
+<th class="px-2 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left text-secondary border-b-2 border-secondary @GetCssClass()">
+	@ChildContent
+</th>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+}

Parts/TableParts/TableNote.razor

@@ -0,0 +1,8 @@
+<p class="text-xs font-normal italic normal-case">
+	@ChildContent
+</p>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+}

Parts/TableParts/TablePart.razor

@@ -0,0 +1,11 @@
+<td class="border-t-0 px-2 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4">
+	@ChildContent
+</td>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+
+	[Parameter]
+	public string? Class { get; set; }
+}

Parts/TableParts/TableSidePart.razor

@@ -0,0 +1,8 @@
+<td class="border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary">
+	@ChildContent
+</td>
+
+@code {
+	[Parameter]
+	public RenderFragment ChildContent { get; set; } = default!;
+}

Parts/TextParts/Divider.razor

@@ -0,0 +1,3 @@
+@inherits NejComponentBase
+
+<hr class=@("my-2 md:min-w-full border-secondary "+GetCssClass())>

Parts/_Imports.razor

@@ -0,0 +1 @@
+@namespace Nejcraft.Shared.Parts

_Imports.razor

@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web