Sysinfocus AspNetCore Components

https://github.com/sysinfocus/shadcn-inspired
Admin
A Razor component library for Blazor, inspired by the shadcn/ui components, providing UI elements...
Tokens:50,147
Snippets:123
Trust Score:7.8
License:MIT
Update:11 months ago
Show doc for...
Tokens:
Raw
### Display alert with various types

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/AlertExample.razor.txt

Shows how to create alert components with different types such as default, destructive, success, warning, and info. Each alert includes an icon, title, and description.

```HTML
<section class="flex-col">
    <h2>Alert</h2>
    <div class="flex-col">
        <Alert Title="Heads up!" Description="This is your sample description text." />
        <Alert Icon="error" Title="Error" Description="Your session has expired. Please log in again." Type="AlertType.Destructive" />
        <Alert Icon="task_alt" Title="Success!" Description="This is your sample description text." Type="AlertType.Success" />
        <Alert Icon="warning" Title="Warning..." Description="This is your sample description text." Type="AlertType.Warning" />
        <Alert Icon="info" Title="Information" Description="This is your sample description text." Type="AlertType.Info" />
    </div>
</section>
```

--------------------------------

### Button Component Examples - Blazor

Source: https://context7.com/sysinfocus/shadcn-inspired/llms.txt

Demonstrates the usage of the Button component in Blazor, showcasing various types, sizes, icon integration, loading states, and event handling. This component is built with C# and Razor.

```razor
<!* Basic button types *!>
<Button Text="Primary" Type="ButtonType.Primary" />
<Button Text="Secondary" Type="ButtonType.Secondary" />
<Button Text="Destructive" Type="ButtonType.Destructive" />
<Button Text="Success" Type="ButtonType.Success" />
<Button Text="Warning" Type="ButtonType.Warning" />
<Button Text="Info" Type="ButtonType.Info" />
<Button Text="Outline" Type="ButtonType.Outline" />
<Button Text="Ghost" Type="ButtonType.Ghost" />
<Button Text="Link" Type="ButtonType.Link" />

<!* Icon-only and icon with text buttons *!>
<Button Icon="chevron_right" Type="ButtonType.Icon" />
<Button Icon="drafts" Text="Login with Email" />

<!* Loading state and sizing *!>
<Button Text="Please wait" Type="ButtonType.Loading" Size="ButtonSize.Large" />
<Button Icon="drafts" Text="Login with Email" Type="ButtonType.Destructive" Size="ButtonSize.Small" />

<!* With click handler *!>
<Button Text="Submit" Width="fit-content" OnClick="OnSubmit" />

@code {
    void OnSubmit() {
        // Handle button click
        Console.WriteLine("Button clicked");
    }
}
```

--------------------------------

### Render Collapsible Component using

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/CollapsibleExample.razor.txt

This snippet shows how to use the Collapsible component within a Razor page. It includes a header with a styled Button and a content area with multiple Button instances. The example relies on the Shadcn-inspired component library and standard Razor syntax.

```Razor
@page "/Examples/CollapsibleExample"
<section class=\"flex-col\">
    <h2>Collapsible</h2>    
    <div class=\"flex\">
        <Collapsible Title=\"@(\"@peduarte starred 3 repositories\")\" Style=\"max-width: 400px\">
            <Header>                
                <Button Text=\"@(\"@radix-ui/primitives\")\" Type=\"ButtonType.Outline\" Disabled Style=\"font-weight: 400\" Width=\"\" />
            </Header>
            <Content>
                <Button Text=\"@(\"@radix-ui/primitives\")\" Type=\"ButtonType.Outline\" Disabled Style=\"font-weight: 400\"%\" />
                <Button Text=\"@(\"@radix-ui/primitives\")\" Type=\"ButtonType.Outline\" Disabled Style=\"font-weight: 400\" Width=\"100%\" />
            </Content>
        </Collapsible>
    </div>
</section>
```

--------------------------------

### Input Component Examples - Blazor

Source: https://context7.com/sysinfocus/shadcn-inspired/llms.txt

Illustrates the use of the Input component in Blazor for various input scenarios. It covers simple text inputs, inputs with labels and helper text, and inputs with two-way data binding and validation. This component is built with C# and Razor.

```razor
<section class="flex-col">
    <!* Simple input with placeholder *!>
    <Input Placeholder="Type your message here." TItem="string" />

    <!* Input with label and info text *!>
    <Input TItem="string"
           Label="Full name"
           Info="Type your full name here." />

    <!* Input with two-way binding and validation *!>
    <Input Label="Username"
           Info="This is your public display name."
           Type="text"
           TItem="string"
           Placeholder="shadcn"
           Value="@username"
           ValueChanged="x => username = x"
           Error="Username" />
</section>

@code {
    string? username;
}
```

--------------------------------

### Card Component Example: Project Creation Form

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/CardExample.razor.txt

Demonstrates a 'Card' component used to create a project form. It includes input fields for project name and framework, along with 'Cancel' and 'Deploy' buttons. This component is self-contained and requires no external data to render.

```html
<Card Style="min-width: 350px; max-width: 350px;">
    <CardHeader>
        <h3>Create project</h3>
        <p>Deploy your new project in one-click.</p>
    </CardHeader>
    <CardContent>
        <div style="display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0">
            <Input Label="Name" Placeholder="Name of your project" TItem="string" />
            <Input Label="Framework" Placeholder="Select" TItem="string" />
        </div>
    </CardContent>
    <CardFooter>
        <div class="flex jcsb" style="width: 100%; padding: 1.5rem; padding-top: 0">
            <Button Text="Cancel" Type="ButtonType.Outline" />
            <Button Text="Deploy" />
        </div>
    </CardFooter>
</Card>
```

--------------------------------

### Implement Toggle Group Component

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/ToggleGroupExample.razor.txt

Creates a toggle group with default styling. This implementation uses Blazor components with Icon children. Each toggle can be independently activated. No external dependencies required.

```html
<ToggleGroup>
    <Toggle>
        <Icon Name="format_bold" />
    </Toggle>
    <Toggle>
        <Icon Name="format_italic" />
    </Toggle>
    <Toggle>
        <Icon Name="format_underlined" />
    </Toggle>
</ToggleGroup>
```

--------------------------------

### Save File Picker - Blazor Component Implementation

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/SaveFilePickerExample.razor.txt

Complete Blazor component demonstrating file download and save functionality. Uses SaveFilePicker component reference to handle both direct downloads and user-initiated saves. Includes HTML template with button triggers and C# methods for file operations.

```csharp
@page "/save-file-picker"
@using System.Text

<section class="flex-col">
    <h2>Save File Picker</h2>
    <p>This example showcases two ways a content can be delivered to the user. Direct Download or Get User to Save File.</p>
    <p><b>Download File</b> will download a text file with this content - "Hi, hello, how are you?"</p>
    <Button Text="Download File" OnClick="DownloadFile" />

    <p><b>Save File</b> will ask user to save a text file with this content - "Hi, hello, how are you?"</p>
    <Button Text="Save File" OnClick="SaveFile" />    
    <small>Note: This feature is available only in supported browsers.</small>
</section>

<SaveFilePicker @ref="@sfp" />

@code
{
    private SaveFilePicker? sfp;
    private string someText = "Hi, hello, how are you?";

    private async Task SaveFile()
    {
        if (sfp is null) return;
        await sfp.SaveFile(System.Text.Encoding.UTF8.GetBytes(someText));
    }

    private async Task DownloadFile()
    {
        if (sfp is null) return;        
        await sfp.DownloadFile(someText, "text/plain");
    }
}
```

--------------------------------

### Render Drawer UI with Blazor Component (HTML)

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/DrawerExample.razor.txt

Provides the complete HTML and Razor markup for a Drawer component, including buttons, dynamic values, and layout elements. It relies on Blazor components such as Button and Drawer and uses inline event handlers. The markup renders the UI and binds to C# properties for interactivity.

```HTML
<section class=\"flex-col\">\n    <h2>Drawer</h2>    \n    <div class=\"flex\">\n        <Button Text=\"Open Drawer\" Type=\"ButtonType.Outline\" Class=\"border\" OnClick=\"() => show = true\" />\n    </div>\n</section>\n\n<style>\n    .bars { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 1rem; height: 110px }\n    .bars span { display: block; background-color: var(--primary-fg); width: 21px; animation: animate 300ms linear 300ms forwards; top: var(--h) }\n    @@keyframes animate {\n    from { height: 0 }\n    to { height: var(--h) }\n    }\n</style>\n\n<Drawer Show=\"@show\" OnClose=\"() => show = false\">\n    <div class=\"flex-col g4 ai-s\" style=\"width: 360px; height: 100%\">\n        <div>\n            <h4 class=\"large\">Move Goal</h4>\n            <p class=\"muted\">Set your daily activity goal.</p>\n        </div>\n        <div style=\"flex: 1\">\n            <div class=\"flex jcsb f1 mtb1\">\n                <Button Icon=\"remove\" Type=\"ButtonType.Icon\" Class=\"border rounded\" OnClick=\"() => number = number - 1\" />\n                <div style=\"text-align: center; line-height: 1\">\n                    <h1 style=\"font-size: 72px\">@number</h1>\n                    <small style=\"font-size: 11px; opacity: 0.75\">CALORIES/DAY</small>\n                </div>                \n                <Button Icon=\"add\" Type=\"ButtonType.Icon\" Class=\"border rounded\" OnClick=\"() => number = number + 1\" />\n            </div>\n            <div class=\"bars\">\n                <span style=\"--h:100px; --d:100ms\"></span>\n                <span style=\"--h:82px; --d:82ms\"></span>\n                <span style=\"--h:55px; --d:55ms\"></span>\n                <span style=\"--h:83; --d:83ms\"></span>\n                <span style=\"--h:55px; --d:55ms\"></span>\n                <span style=\"--h:76px; --d:76ms\"></span>\n                <span style=\"--h:52px; --d:52ms\"></span>\n                <span style\"--h:66px; --d:66ms\"></span>\n                <span style=\"--h:83px; --d:83ms\"></span>\n                <span style=\"--h:55px; --d:55ms\"></span>\n                <span style=\"--h:76px; --d:76ms\"></span>\n                <span style=\"--h:52px; --d:52ms\"></span>\n                <span style=\"--h:96px; --d:96ms\"></>\n            </div>\n        </div>\n        <div class=\"flex-col g8\">\n            <Button Text=\"Submit\" Style=\"justify-content: center\" Width=\"100%\" OnClick=\"() => show = false\" />\n            <Button Text=\"Cancel\" Type=\"ButtonType.Outline\" Class=\"border\" Style=\"justify-content: center\" Width=\"100%\" OnClick=\"() => show = false\" />\n        </div>n    </div>\n</Drawer>
```

--------------------------------

### Card Component Example: Notifications Display

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/CardExample.razor.txt

Illustrates a 'Card' component used to display user notifications. It features a header with a summary and displays a list of notifications, each with a status dot and details. Includes a 'Mark all as read' button for interaction.

```html
<Card Style="min-width: 350px; max-width: 350px;">
    <CardHeader>
        <h3>Notifications</h3>
        <p>You have 3 unread messages.</p>
    </CardHeader>
    <CardContent>
        <div class="flex-col" style="gap: 1rem">
            <div class="flex border aic" style="width: 100%;">
                <Button Icon="notifications" Class="nostyle" Disabled />
                <div class="flex-col g4 f-1">
                    <b class="rg">Push Notifications</b>
                    <p class="sm">Send notifications to device.</p>
                </div>
                <Switch Checked />
            </div>
            <div class="flex aifs">
                <span class="card-dot"></span>
                <div class="flex-col g4">
                    <b class="rg">Your call has been confirmed.</b>
                    <p class="rg">1 hour ago</p>
                </div>
            </div>
            <div class="flex aifs">
                <span class="card-dot"></span>
                <div class="flex-col g4">
                    <b class="rg">You have a new message!</b>
                    <p class="rg">1 hour ago</p>
                </div>
            </div>
            <div class="flex aifs">
                <span class="card-dot"></span>
                <div class="flex-col g4">
                    <b class="rg">Your subscription is expiring soon!</b>
                    <p class="rg">2 hour ago</p>
                </div>
            </div>
        </div>
    </CardContent>
    <CardFooter>
        <div class="flex jcsb" style="width: 100%; padding: 1.5rem; padding-top: 0">
            <Button Icon="check" Text="Mark all as read" Width="100%" Style="justify-content: center" />
        </div>
    </CardFooter>
</Card>
```

--------------------------------

### Define Bar Animation Styles for Drawer (CSS)

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/DrawerExample.razor.txt

Contains the CSS rules that style the animated bars displayed inside the Drawer. It sets layout, sizing, and a keyframes animation that grows each bar based on a custom property. No external dependencies are required beyond standard CSS variables.

```CSS
.bars { display: flex; gap: 8px; align-items flex-end; margin-bottom: 1rem; height: 110px }\n.bars span { display: block; background-color: var(--primary-fg); width: 21px; animation: animate 300ms linear 300ms forwards; top: var(--h) }\n@@keyframes animate {\nfrom { height: 0 }\nto { height: var(--h) }\n}
```

--------------------------------

### Select Component in a Form Example (C#)

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/SelectExample.razor.txt

Illustrates integrating the Select component within a form to select an email address. It shows how to associate a label, provide helper text, and bind the selected value to a variable, alongside a submit button.

```C#
string[] emails = ["m@example.com", "m@google.com", "m@support.com"];
string? selectedEmail = "m@support.com";

<Select Label="Email" Info="You can manage email addresses in your email settings." Items="@emails" Display="x => x"
    TItem="string" SelectedItem="@selectedEmail" OnItemSelect="x => selectedEmail = x" Width="400px" />

<Button Text="Submit" Width="fit-content" />
```

--------------------------------

### Manage Drawer State and Counter in Blazor (C# Razor)

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/DrawerExample.razor.txt

Provides the C# code-behind for the Drawer component, defining a boolean flag to control visibility and an integer counter for the daily goal. The properties are bound to the UI via Razor syntax, enabling interactive updates when buttons are clicked. This snippet assumes a Blazor server or WebAssembly environment.

```C#
bool shownint number = 350;
```

--------------------------------

### Blazor Combobox: Basic Item Selection

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/ComboboxExample.razor.txt

This snippet demonstrates a basic Blazor Combobox for selecting a framework from a predefined list. It uses string items and handles selection via the OnItemSelect event, displaying the selected item below the combobox. The combobox is configured to be non-searchable and has a fixed width.

```razor
<section class="flex-col">
    <h2>Combobox</h2>
    <Combobox Items="items" TItem="string" Width="200px" Searchable="false" Display="x => x"
              SelectedItem="@selectedFramework" OnItemSelect="x => selectedFramework = x" Placeholder="Select framework..." />
    @if (selectedFramework is not null)
    {
        <p>You have selected: <b>@selectedFramework</b></p>
    }
</section>

@code
{
    string? selectedFramework;
    string[] items = ["Blazor", "Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"];
}
```

--------------------------------

### Blazor Pagination Markup Examples

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/PaginationExample.razor.txt

These Razor snippets demonstrate how to instantiate the Pagination component with different props for styling variations in Blazor. Purpose is to render paginated UI elements with customizable button types, sizes, and styles. Dependencies include the Pagination component, ButtonType enum, and ButtonSize enum. Inputs are the pagination state object and page change event handler; outputs are rendered HTML pagination controls. Limitations include reliance on external state management and event handling.

```Razor
<Pagination State="@_paginationState" OnPageChange="x => currentPage = x" />
```

```Razor
<Pagination ActiveType="ButtonType.Secondary" Type="ButtonType.Outline" State="@_paginationState" OnPageChange="x => currentPage = x" />
```

```Razor
<Pagination ActiveType="ButtonType.Primary" State="@_paginationState" OnPageChange="x => currentPage = x" />
```

```Razor
<Pagination ActiveType="ButtonType.Primary" Type="ButtonType.Secondary" State="@_paginationState" OnPageChange="x => currentPage = x" />
```

```Razor
<Pagination ActiveType="ButtonType.Primary" Type="ButtonType.Ghost" Size="ButtonSize.Small" State="@_paginationState" OnPageChange="x => currentPage = x" />
```

--------------------------------

### Basic Select Component Usage (C#)

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/SelectExample.razor.txt

Demonstrates how to use the Select component to allow users to choose an item from a predefined list of fruits. It includes setting a placeholder, specifying the item type, and handling the selection.

```C#
string[] fruits = ["**Fruits**", "Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];
string? selectedItem = "Grapes";

<Select Items="@fruits" Placeholder="Select a fruit" Width="200px" Display="x => x" TItem="string" SelectedItem="@selectedItem" OnItemSelect="x => selectedItem = x" />
```

--------------------------------

### Vertical Carousel Component

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/CarouselExample.razor.txt

Renders a carousel with images displayed in vertical slides. This variation is activated by the 'ShowVertical' prop. It also accepts image elements as children for its slides.

```html
<Carousel ShowVertical>
    <img src="https://plus.unsplash.com/premium_photo-1688045722767-8d8672f6950b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1720728659925-9ca9a38afb2c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1720937172267-575f3575386b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzfHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1718506921878-781af1aadaf2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw2fHx8ZW58MHx8fHx8" />
    <img src="https://plus.unsplash.com/premium_photo-1664551734513-7c7e0dd24fac?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw5fHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1720458087424-5908294c1d20?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMnx8fGVufDB8fHx8fA%3D%3D" />
    <img src="https://images.unsplash.com/photo-1710444223962-a18f0de17a24?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxOXx8fGVufDB8fHx8fA%3D%3D" />
</Carousel>
```

--------------------------------

### Widget System Configuration with Multimedia

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/WidgetExample.razor.txt

HTML code defining a customizable widget system with multiple components. Features include size and color properties, gradient backgrounds, video integration, and base64 image data. The system supports layout management through CSS Grid and includes interactive video content from external sources.

```html
<Widget Width="120px" Height="260px" TextColor="black" LogoColor="black" Text="Settings" Logo="settings" SwapLogoText Background="linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)" />
        </div>
        <Widget Width="260px" Height="260px" Logo="&nbsp;" SwapLogoText VerticalAlign="space-between">
            <video style="margin-top: -3rem; width: 400px;" muted autoplay src="https://www.apple.com/105/media/us/apple-vision-pro/2024/6e1432b2-fe09-4113-a1af-f20987bcfeee/anim/hero-us/large.mp4" />
        </Widget>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem">
            <Widget Width="120px" Height="120px">
                <img style="object-fit: cover" src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEBUSEhMWFRUWFxUYFxYWFRUXFRUZFRUXFxgYFxUYHSggGhomHRUYITEhJSkrLi4uFyAzODMtNygtLisBCgoKDg0OGxAQGi0lIB4tLS0rLS4tLS0tLS0tLS0tLSstLS0tLS0tLS4vLS4rKy0tLS0tLS0tLS0rLS0tLSstLf/AABEIAM4A9AMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYCAwQHAf/EADwQAAEDAgMEBwYFAwUBAQAAAAEAAgMEEQUhMRJBUWEGE3GBkaHRIjJCscHwByNScuEUYvEzU4KSojQV/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAJREBAQEAAgICAgICAwAAAAAAAAECAxESMQQhQWETFHHwIzJR/9oADAMBAAIRAxEAPwD3FERAREQEREBERAREQEREBEWJkA3hBki1mdvHyK+f1DfsKO4nptRaxM3isw4HRT2h9REQEREBERAREQEREBERAREQEREBERAREQEREBEWmacN7fknY2ucBquaWsA08/RR89YSbNzPkFpEF83m/Iafys7peZb5cSubC7jwGfkFq66Q6NA7T6LY1thYZcgvuyqpadmT9YHcfVOrf+vy/n771v2Smwg0fmDRwPiF9FU8e8w9oz+S3FhXyyDbT4iDv7iu6OoB5fJREkYOovz3+KwaHt907Q4HXx0KmasR1FgRRlJXf4P3kpFjwRktJe1bOmSIilAiIgIiICIiAiIgIiICIiAiIgIi0VdQGjmfu6D5U1Fsh/hREkhebDJvHeexYSTF5sNN67qakJWVvbTrpoiisLAZLqjpSV2RwALarTKt05mUg3ra2Fo3LGapa3U92p8FwT4y0aC3afoFGt4z7Wzx736iUDRwSygXY246f+WkrH/9eT+7/p/Cp/Yw1/q8ifLBwHgsHU7TuUOzHDvt3ggruhxVh1y8x6qZzYquvj8mfwzfRcCuaSAjUKTY8EXBBHJZELTxlZd2ICWLfoePrxC3UlUQbHI+R9VITUgOii6qnI5Klli0vaaikDhcLNQdFW2Oeo1CmmOBFxoVfN7Us6ZIiKyBERAREQEREBERAREQEREGE0gaLlVXE8Qc59hqclOV8lzbcPmomgotuoB3N9o/QeKz1e400zOvtKYZh+y0bWv3qpMBFi94AucgFeSRT2PeALk2AUPXYtubcdnvH0XPiOIF5sO4cOZ5rRTUxJyBJHJZ2G62rdNdU4nQ6R1fJaN6dJ5N9qZIiKsIiICIiAiIgIiICIiAiICIiAiIgIi0VdQGjmfu6D5U1Fsh/hREkhebDJvHeexYSTF5sNN67qakJWVvbTrpoiisLAZLqjpSV2RwALarTKt05mUg3ra2Fo3LGapa3U92p8FwT4y0aC3afoFGt4z7Wzx736iUDRwSygXY246f+WkrLS0tLS4tLS0tLS0tLS0tLS0tLSstLS0tLS0tLS4vLS4rKy0tLS0tLS0tLS0tLS0tLS0tLSstLf/AABEIAM4A9AMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYCAwQHAf/EADwQAAEDAgMEBwYFAwUBAQAAAAEAAgMEEQUhMRJBUWEGE3GBkaHRIjJCscHwByNScuEUYvEzU4KSojQV/8QAGQEBAAMBAQAAAAAAAAAAAAAAAAECAwQF/8QAJREBAQEAAiAgICAgICAwAAAAAAAAECAxESMQQhQWETFHHwIzJR/9oADAMBAAIRAxEAPwD3FERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQþU/3V4C7W2H7+8sN23f5aKkIiICIiAiIgIiICIiAiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiGP4cN JQ3l7K6J8J2N3S1sCq7T3g4E9y2tqNwKAgIiICIiAiIgIiICIiAiIgIiICItFXy1C64W38A==
```

--------------------------------

### Populate Activity Log with Sample Data (C#)

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/ActivityLogExample.razor.txt

This C# code snippet demonstrates how to create a list of 'Log' objects to be used as data for an activity log component. Each log entry includes details such as user, avatar URL, activity type, description, timestamp, and an activity enum. This data can be passed to a UI component for display.

```csharp
List<Log> logs = [
    new("admin", $"https://randomuser.me/api/portraits/men/{DateTime.Now.Second % 1}.jpg", "User", "'student' created", DateTime.Now.AddDays(-10), ActivityEnum.Create),
    new("student", $"https://randomuser.me/api/portraits/women/{DateTime.Now.Second % 2}.jpg", "Login", "'student' logged in", DateTime.Now.AddDays(-10), ActivityEnum.Read),
    new("admin", $"https://randomuser.me/api/portraits/men/{DateTime.Now.Second % 1}.jpg", "User", "'teacher-1' created", DateTime.Now.AddDays(-9), ActivityEnum.Create),
    new("management", $"https://randomuser.me/api/portraits/women/{DateTime.Now.Second % 4}.jpg", "Reports", "'management' looked into X report", DateTime.Now.AddDays(-9), ActivityEnum.Read),
    new("teacher-1", $"https://randomuser.me/api/portraits/men/{DateTime.Now.Second % 5}.jpg", "Syllabus", "'teacher-1' updated PU - Science - I - Physics - Physical World", DateTime.Now.AddDays(-8), ActivityEnum.Update),
    new("teacher-3", $"https://randomuser.me/api/portraits/men/{DateTime.Now.Second % 6}.jpg", "Syllabus", "'teacher-3' created PU - Science - I - Physics - Units and Measurements", DateTime.Now.AddDays(-8), ActivityEnum.Create),
    new("teacher-2", $"https://randomuser.me/api/portraits/women/{DateTime.Now.Second % 7}.jpg", "Syllabus", "'teacher-2' deleted PU - Science - I - Physics - Physical World", DateTime.Now.AddDays(-7), ActivityEnum.Delete),
    new("student-1", $"https://randomuser.me/api/portraits/women/{DateTime.Now.Second % 8}.jpg", "User", "'username' created", DateTime.Now.AddDays(-7), ActivityEnum.Create),
    new("student-2", $"https://randomuser.me/api/portraits/men/{DateTime.Now.Second % 9}.jpg", "User", "'username' created", DateTime.Now.AddDays(-6), ActivityEnum.Create),
    new("student-3", $"https://randomuser.me/api/portraits/women/{DateTime.Now.Second % 10}.jpg", "User", "'username' created", DateTime.Now.AddDays(-6), ActivityEnum.Create),
];
```

--------------------------------

### Horizontal Carousel Component

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/CarouselExample.razor.txt

Renders a carousel with images displayed in horizontal slides. It accepts Width and Height props for sizing. The component's internal logic handles slide navigation and display.

```html
<Carousel Width="400" Height="300">
    <img src="https://plus.unsplash.com/premium_photo-1688045722767-8d8672f6950b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1720728659925-9ca9a38afb2c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1720937172267-575f3575386b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzfHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1718506921878-781af1aadaf2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw2fHx8ZW58MHx8fHx8" />
    <img src="https://plus.unsplash.com/premium_photo-1664551734513-7c7e0dd24fac?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw5fHx8ZW58MHx8fHx8" />
    <img src="https://images.unsplash.com/photo-1720458087424-5908294c1d20?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxMnx8fGVufDB8fHx8fA%3D%3D" />
    <img src="https://images.unsplash.com/photo-1710444223962-a18f0de17a24?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxOXx8fGVufDB8fHx8fA%3D%3D" />
</Carousel>
```

--------------------------------

### Background Styling with CSS Gradients

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/WidgetExample.razor.txt

Shows various background styling techniques including linear gradients, image backgrounds, and RGBA color combinations for creating visually appealing widget designs.

```css
/* Linear gradients */
Background="linear-gradient(45deg, royalblue 25%, magenta)"
Background="linear-gradient(45deg, blue 25%, lime)"
Background="linear-gradient(45deg, darkorange 25%, darkred)"
Background="linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)"

/* Image backgrounds */
Background="#000 url(https://www.apple.com/v/home/takeover/o/images/overview/hero/hero_startframe__db11rsyn9dyu_large.jpg) no-repeat center -30px; background-size: contain;"
Background="url(https://www.apple.com/v/iphone/home/bw/images/overview/consider_modals/ai/modal_smart__dbelwh7uk002_large.jpg) no-repeat center -15px; background-size: cover;"
```

--------------------------------

### Implement Outline Toggle Group Component

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/ToggleGroupExample.razor.txt

Creates a toggle group with outline styling. Uses the ToggleType.Outline enum to apply border styling to each toggle. Each toggle can be independently activated. Requires Toggle component with Type property support.

```html
<ToggleGroup>
    <Toggle Type="Toggle.ToggleType.Outline">
        <Icon Name="format_bold" />
    </Toggle>
    <Toggle Type="Toggle.ToggleType.Outline">
        <Icon Name="format_italic" />
    </Toggle>
    <Toggle Type="Toggle.ToggleType.Outline">
        <Icon Name="format_underlined" />
    </Toggle>
</ToggleGroup>
```

--------------------------------

### Display Brand Icons using Icon Component

Source: https://github.com/sysinfocus/shadcn-inspired/blob/main/codes/IconExample.razor.txt

This example illustrates how to display brand icons using the Icon component with Microsoft Fluent UI. Key props include 'Name', 'IsBrand' (set to true), 'Type' ('IconType.Fabric'), and 'Size'.

```jsx
<Icon Name="outlook" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="onedrive" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="word" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="excel" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="powerpoint" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="onenote" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="sharepoint" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="teams" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="office" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="access" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="project" IsBrand Type="IconType.Fabric" Size="48" />
<Icon Name="visio" IsBrand Type="IconType.Fabric" Size="48" />
```
Tokens:
Raw