@naptics/vue-collection 0.2.15 → 0.3.1

package/src/demo/views/presentation/BreadcrumbView.tsx

@@ -0,0 +1,52 @@
+import NBreadcrub, { type BreadcrumbItem } from '@/lib/components/NBreadcrub'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ChevronDoubleRightIcon } from '@heroicons/vue/24/solid'
+
+export default createView('BreadcrumbView', () => {
+    const breadcrumbItems: BreadcrumbItem[] = [
+        { label: 'Overview', route: '/' },
+        { label: 'Customers', route: '/' },
+        { label: 'Customer Details', route: '/' },
+        { label: 'Edit Customer', route: '/' },
+    ]
+
+    return () => (
+        <ComponentSection
+            id="breadcrumbs"
+            title="Breadcrumbs"
+            subtitle="Breadcrumbs can be used as a navigation in hierarchical views."
+        >
+            <VariantSection
+                title="Default Breadcrumb"
+                subtitle="Without any customization the default breadcrumb looks like this."
+            >
+                <NBreadcrub items={breadcrumbItems} />
+            </VariantSection>
+
+            <VariantSection title="Different Icon" subtitle="Any icon can be chosen as the sepeartor.">
+                <NBreadcrub items={breadcrumbItems} iconSize={4} icon={ChevronDoubleRightIcon} />
+            </VariantSection>
+
+            <VariantSection
+                title="Customize everthing"
+                subtitle="The color and size of the text and icons can be customized. Additionally the items and the sepeators have custom slots."
+            >
+                <NBreadcrub
+                    items={breadcrumbItems}
+                    color="secondary"
+                    textSize="text-lg"
+                    seperator={() => (
+                        <button
+                            class="text-secondary-500 text-sm font-semibold mx-3"
+                            onClick={() => window.alert('You found the custom button seperator 🕵🏽‍♂️')}
+                        >
+                            /
+                        </button>
+                    )}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/ButtonView.tsx

@@ -0,0 +1,49 @@
+import { createView } from '@/lib/utils/component'
+import NButton from '@/lib/components/NButton'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import ColorGrid from '@/demo/components/ColorGrid'
+
+export default createView('ButtonView', () => {
+    return () => (
+        <ComponentSection
+            title="Buttons"
+            subtitle="The basic building block of all our apps. They can have two sizes and different colors."
+            id="buttons"
+        >
+            <VariantSection title="Normal">
+                <ColorGrid item={color => <NButton color={color}>Click me</NButton>} />
+            </VariantSection>
+
+            <VariantSection title="Small">
+                <ColorGrid
+                    item={color => (
+                        <NButton color={color} small>
+                            Click me
+                        </NButton>
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection title="Disabled">
+                <ColorGrid
+                    item={color => (
+                        <NButton color={color} disabled>
+                            Click me
+                        </NButton>
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection title="Loading">
+                <ColorGrid
+                    item={color => (
+                        <NButton color={color} loading>
+                            Click me
+                        </NButton>
+                    )}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/CheckboxView.tsx

@@ -0,0 +1,59 @@
+import NCheckbox from '@/lib/components/NCheckbox'
+import NCheckboxLabel from '@/lib/components/NCheckboxLabel'
+import ColorGrid from '@/demo/components/ColorGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ref } from 'vue'
+import { vModelForRef } from '@/lib/utils/vModel'
+
+export default createView('CheckboxView', () => {
+    const refs = Array.from({ length: 6 }, () => ref(true))
+
+    return () => (
+        <ComponentSection
+            title="Checkboxes"
+            subtitle="Checkboxes come in different colors and can be used on their own or together with labels."
+            id="checkboxes"
+        >
+            <VariantSection title="On their own">
+                <ColorGrid item={(color, idx) => <NCheckbox color={color} {...vModelForRef(refs[idx])} />} />
+            </VariantSection>
+
+            <VariantSection title="Disabled">
+                <ColorGrid item={(color, idx) => <NCheckbox color={color} {...vModelForRef(refs[idx])} disabled />} />
+            </VariantSection>
+
+            <VariantSection title="With labels" subtitle="Checkboxes can also be toggled by clicking on the texts.">
+                <ColorGrid
+                    colors={2}
+                    cols={2}
+                    item={(color, idx) => (
+                        <NCheckboxLabel
+                            color={color}
+                            {...vModelForRef(refs[idx])}
+                            title="Choose Option"
+                            description="This option will provide many advantages. For example the checkbox will be very beautifully enlightened."
+                        />
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection title="Disabled with labels">
+                <ColorGrid
+                    colors={2}
+                    cols={2}
+                    item={(color, idx) => (
+                        <NCheckboxLabel
+                            color={color}
+                            {...vModelForRef(refs[idx])}
+                            title="Choose Option"
+                            description="This option will provide many advantages."
+                            disabled
+                        />
+                    )}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/DropdownView.tsx

@@ -0,0 +1,59 @@
+import NDropdown, { type DropdownItem } from '@/lib/components/NDropdown'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ArrowDownOnSquareIcon, ShareIcon } from '@heroicons/vue/24/solid'
+
+export default createView('DropdownView', () => {
+    const base: DropdownItem[] = [{ label: 'Save File' }, { label: 'Share File' }]
+    const multiple: DropdownItem[][] = [base, [{ label: 'Logout', route: '/logout' }, { label: 'Profile' }]]
+    const icons: DropdownItem[] = [
+        { label: 'Save File', icon: ArrowDownOnSquareIcon },
+        { label: 'Share File', icon: ShareIcon, route: '/share' },
+    ]
+
+    const links: DropdownItem[][] = [
+        [{ label: 'Normal Action' }],
+        [
+            { label: 'Route', route: '/link' },
+            { label: 'Other Route', route: '/link2' },
+        ],
+    ]
+
+    return () => (
+        <ComponentSection
+            title="Dropdowns"
+            subtitle="Dropdowns can be used to group multiple actions together."
+            id="dropdowns"
+        >
+            <VariantSection
+                title="Different Contents"
+                subtitle="The content can be selected using the mouse or the arrow keys. The items can either trigger an action or be a router link."
+            >
+                <ComponentGrid cols={4}>
+                    <NDropdown title="Basic Dropdown" items={base} />
+                    <NDropdown title="Multiple Sections" items={multiple} />
+                    <NDropdown title="Action Icons" items={icons} />
+                    <NDropdown title="Router Links" items={links} />
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection
+                title="Customization"
+                subtitle="Dropdowns can be disabled and configured to be right aligned. For further customized there is a slot for a custom button."
+            >
+                <ComponentGrid cols={4}>
+                    <NDropdown title="Disabled" disabled />
+                    <NDropdown title="Right Aligned" right items={base} />
+                    <div class="flex items-center justify-center">
+                        <NDropdown
+                            items={base}
+                            button={HeadlessButton => <HeadlessButton> Custom Button</HeadlessButton>}
+                        />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/DropzoneView.tsx

@@ -0,0 +1,39 @@
+import NDropzone from '@/lib/components/NDropzone'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ref } from 'vue'
+import { vModelForRef } from '@/lib/utils/vModel'
+
+export default createView('DropzoneView', () => {
+    const fileRefs = Array.from({ length: 5 }).map(() => ref<File[]>([]))
+
+    return () => (
+        <ComponentSection
+            title="Dropzones"
+            subtitle="Dropzones are a simple way for the user to provide files to the application."
+            id="dropzones"
+        >
+            <VariantSection title="Basic" subtitle="Files can be added by clicking on the area or by dropping them.">
+                <NDropzone {...vModelForRef(fileRefs[0])} maxLengthFileNames={50} />
+            </VariantSection>
+
+            <VariantSection title="Multiple files">
+                <NDropzone {...vModelForRef(fileRefs[1])} maxFiles={10} />
+            </VariantSection>
+
+            <VariantSection
+                title="File Type and Size"
+                subtitle="The allowed file types and their maximum size can be specified."
+            >
+                <NDropzone
+                    {...vModelForRef(fileRefs[2])}
+                    maxFiles={5}
+                    accept="image/*, .pdf, .zip"
+                    maxFileSize={5 * 1024 * 1024}
+                    description="Files of type .pdf or .zip and all image files with a max size of 5 MB are allowed."
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/IconButtonView.tsx

@@ -0,0 +1,47 @@
+import NIconButton from '@/lib/components/NIconButton'
+import ColorGrid from '@/demo/components/ColorGrid'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import {
+    CogIcon,
+    CreditCardIcon,
+    EyeIcon,
+    KeyIcon,
+    PencilIcon,
+    RssIcon,
+    ArrowTopRightOnSquareIcon,
+    ChevronDoubleRightIcon,
+} from '@heroicons/vue/24/solid'
+
+export default createView('IconButtonView', () => {
+    const icons = [CogIcon, RssIcon, KeyIcon, CreditCardIcon, PencilIcon, EyeIcon]
+    const sizes = [4, 5, 6, 7, 8, 10]
+
+    return () => (
+        <ComponentSection
+            title="Icon Buttons"
+            subtitle="Icon Buttons are regular buttons which just have an icon and no text."
+            id="icon-buttons"
+        >
+            <VariantSection title="Different Colors">
+                <ColorGrid item={(color, index) => <NIconButton icon={icons[index]} color={color} />} />
+            </VariantSection>
+
+            <VariantSection title="Different Sizes">
+                <ComponentGrid>
+                    {sizes.map(size => (
+                        <div class="flex items-center justify-start">
+                            <NIconButton icon={ChevronDoubleRightIcon} size={size} />
+                        </div>
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="Router Links" subtitle="The Icon Button can also be used as a regular router link.">
+                <ColorGrid item={color => <NIconButton icon={ArrowTopRightOnSquareIcon} route="/" color={color} />} />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/IconCircleView.tsx

@@ -0,0 +1,38 @@
+import NIconCircle from '@/lib/components/NIconCircle'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { FireIcon } from '@heroicons/vue/24/solid'
+
+export default createView('IconCircleView', () => {
+    return () => (
+        <ComponentSection title="Icon Circles" subtitle="Just a regular icon in a circle." id="icon-circles">
+            <VariantSection
+                title="Unlimited possibilities"
+                subtitle="The color, circle size, icon size and the shades of icon and background can be customized."
+            >
+                <ComponentGrid>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" bgShade={700} iconShade={50} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" circleSize={16} iconSize={4} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" circleSize={16} iconSize={14} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" iconSize={6} />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/InputView.tsx

@@ -0,0 +1,179 @@
+import NButton from '@/lib/components/NButton'
+import NForm from '@/lib/components/NForm'
+import NInput from '@/lib/components/NInput'
+import NSelect from '@/lib/components/NSelect'
+import NValInput from '@/lib/components/NValInput'
+import { createValidatedForm } from '@/lib/components/ValidatedForm'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { email, matches, password, regex, integer, numberRange, length } from '@/lib/utils/validation'
+import { createView } from '@/lib/utils/component'
+import { ref } from 'vue'
+import NInputSelect from '@/lib/components/NInputSelect'
+import NInputSuggestion from '@/lib/components/NInputSuggestion'
+import NInputPhone from '@/lib/components/NInputPhone'
+import { vModelForRef } from '@/lib/utils/vModel'
+import NTextArea from '@/lib/components/NTextArea'
+
+export default createView('InputView', () => {
+    const suggestions = [
+        { id: '1', label: 'Heidi Klum' },
+        { id: '2', label: 'Frida Kahlo' },
+        { id: '3', label: 'Berta Meier' },
+        { id: '4', label: 'Mike Müller' },
+        { id: '5', label: 'Hans Peter' },
+        { id: '6', label: 'Franz Weber' },
+        { id: '7', label: 'Franziska Weberin' },
+        { id: '8', label: 'Angela Merkel' },
+    ]
+
+    const refs = Array.from({ length: 21 }, () => ref(''))
+
+    function vModel(n: number) {
+        return vModelForRef(refs[n])
+    }
+
+    const form = createValidatedForm()
+    const onSubmit = () => alert('Form was submitted!')
+
+    const showDynamicInput = ref(true)
+
+    return () => (
+        <ComponentSection
+            title="Inputs and Forms"
+            subtitle="Handle user input well with these inputs and forms."
+            id="inputs"
+        >
+            <VariantSection
+                title="Plain HTML"
+                subtitle="Wherever it is possible, the html features are used. The inputs can be selected by specifying the type attribute."
+            >
+                <NForm>
+                    <ComponentGrid cols={2}>
+                        <NInput {...vModel(0)} name="Name" />
+                        <NInput {...vModel(1)} name="Age" type="number" />
+                        <NInput {...vModel(2)} name="Password" type="password" />
+                        <div class="space-y-2">
+                            <NSelect
+                                {...vModel(3)}
+                                name="Country"
+                                optional
+                                options={[
+                                    { id: 'ch', label: 'Switzerland' },
+                                    { id: 'de', label: 'Germany' },
+                                    { id: 'au', label: 'Austria' },
+                                ]}
+                            />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(3).value}`}</p>
+                        </div>
+                        <div class="space-y-2">
+                            <NInput {...vModel(4)} name="Date" type="date" />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(4).value}`}</p>
+                        </div>
+                        <div class="space-y-2">
+                            <NInput {...vModel(5)} name="Time" type="time" />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(5).value}`}</p>
+                        </div>
+                    </ComponentGrid>
+                </NForm>
+            </VariantSection>
+
+            <VariantSection
+                title="Input Validation"
+                subtitle="Inputs can be validated using different rules. Some inputs also implement a custom formatter, like the input for phone numbers."
+            >
+                <NForm>
+                    <ComponentGrid cols={2}>
+                        <NValInput {...vModel(15)} name="First Name" />
+                        <NValInput {...vModel(16)} name="Last Name" rules={length(2, undefined)} />
+                        <NValInput {...vModel(6)} name="Age" type="number" rules={[integer, numberRange(0, 120)]} />
+                        <NValInput {...vModel(7)} name="Email" type="email" rules={email} />
+                        <NValInput {...vModel(8)} name="Password" type="password" rules={password} />
+                        <NValInput
+                            {...vModel(9)}
+                            name="Repeat Password"
+                            type="password"
+                            rules={[matches(refs[8].value)]}
+                        />
+                        <NValInput
+                            {...vModel(10)}
+                            name="Regex"
+                            rules={regex(/^foo.*bar$/)}
+                            placeholder="Try foo...bar"
+                        />
+                        <div class="space-y-2">
+                            <NInputPhone {...vModel(11)} name="Mobile" />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(11).value}`}</p>
+                        </div>
+                    </ComponentGrid>
+                </NForm>
+            </VariantSection>
+
+            <VariantSection
+                title="Text Areas"
+                subtitle="If longer text is needed, the text area can be used. It provides most of the feature of a validated input."
+            >
+                <div class="space-y-4">
+                    <NTextArea
+                        {...vModel(17)}
+                        name="Resizable Text Area"
+                        placeholder="This text area can be resized with the handle with max 100 characters, which is required to fill out."
+                        maxLength={100}
+                    />
+                    <NTextArea
+                        {...vModel(18)}
+                        name="Larger Text Area"
+                        placeholder="This is a larger non-resizable optional text area."
+                        rows={5}
+                        resizable={false}
+                        optional
+                    />
+                </div>
+            </VariantSection>
+
+            <VariantSection
+                title="Suggestion Lists"
+                subtitle="The left input just shows filtered suggestions and allows any input. The right input expects the user to pick an item from the list."
+            >
+                <ComponentGrid cols={2}>
+                    <div class="space-y-2">
+                        <NInputSuggestion
+                            {...vModel(12)}
+                            suggestions={suggestions.map(sugg => sugg.label)}
+                            name="Any Person"
+                        />
+                        <p class="text-xs text-default-500">{`Value of the field: ${vModel(12).value}`}</p>
+                    </div>
+                    <div class="space-y-2">
+                        <NInputSelect {...vModel(19)} options={suggestions} name="Choose Person" />
+                        <p class="text-xs text-default-500">{`Value of the field: ${vModel(19).value}`}</p>
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection
+                title="Forms"
+                subtitle="Validated Inputs can be added to forms. When trying to submit the form, all inputs are validated first and only if the validation succeeds, the form is submitted."
+            >
+                <NForm form={form} onSubmit={onSubmit}>
+                    <ComponentGrid cols={2}>
+                        <NValInput name="First Name" form={form} {...vModel(13)} />
+                        <NValInput name="Last name" form={form} {...vModel(14)} />
+                        {showDynamicInput.value && <NValInput name="Hello World" form={form} {...vModel(20)} />}
+
+                        <div class="flex space-x-2 items-end">
+                            <NButton
+                                color="secondary"
+                                onClick={() => (showDynamicInput.value = !showDynamicInput.value)}
+                            >
+                                Toggle Input
+                            </NButton>
+                            <NButton type="submit">Submit Form</NButton>
+                        </div>
+                    </ComponentGrid>
+                </NForm>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/LinkView.tsx

@@ -0,0 +1,60 @@
+import NLink from '@/lib/components/NLink'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+
+export default createView('LinkView', () => {
+    const hi = () => window.alert('hello')
+
+    return () => (
+        <ComponentSection
+            id="links"
+            title="Links"
+            subtitle="Links are styled texts which can be used as links or regular buttons."
+        >
+            <VariantSection title="Normal Links">
+                <ComponentGrid cols={4}>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" />
+                    </div>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" color="secondary" shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" color="secondary" />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+            <VariantSection title="Button Links" subtitle="Sometimes it can be useful to style a button as a link.">
+                <ComponentGrid cols={4}>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} />
+                    </div>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} color="secondary" shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} color="secondary" />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+            <VariantSection title="Disabled Links">
+                <ComponentGrid cols={4}>
+                    <div>
+                        <NLink text="Disabled Link" disabled />
+                    </div>
+                    <div>
+                        <NLink text="Disabled Link" onClick={hi} color="secondary" disabled />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/ListView.tsx

@@ -0,0 +1,29 @@
+import type { ListItem } from '@/lib/components/NList'
+import NList from '@/lib/components/NList'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+
+export default createView('ListView', () => {
+    const items: ListItem[] = [
+        { title: 'Name', text: 'Michael Scott' },
+        { title: 'Profession', text: 'Nerd' },
+        { title: 'Title', text: 'Dr. phil.' },
+        {
+            title: () => <span class="font-extrabold">Date Of Birth</span>,
+            text: () => <span class="text-primary-500">14.10.1982</span>,
+        },
+    ]
+
+    return () => (
+        <ComponentSection
+            title="List"
+            subtitle="A component to display key-value information in a simple and neat way."
+            id="lists"
+        >
+            <VariantSection title="Display Information">
+                <NList items={items} />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/LoadingIndicatorView.tsx

@@ -0,0 +1,38 @@
+import NLoadingIndicator from '@/lib/components/NLoadingIndicator'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+
+export default createView('NLoadingIndicator', () => {
+    const sizes = [4, 6, 8, 10, 12, 14]
+
+    return () => (
+        <ComponentSection
+            title="Loading Indicator"
+            subtitle="A loading indicator which helps to keep the user patient."
+            id="loading-indicators"
+        >
+            <VariantSection title="Different colors and shades">
+                <ComponentGrid>
+                    <NLoadingIndicator shade={700} />
+                    <NLoadingIndicator shade={400} />
+                    <NLoadingIndicator shade={100} />
+                    <NLoadingIndicator color="secondary" shade={100} />
+                    <NLoadingIndicator color="secondary" shade={400} />
+                    <NLoadingIndicator color="secondary" shade={700} />
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="Different sizes">
+                <ComponentGrid>
+                    {sizes.map(size => (
+                        <div class="flex items-center">
+                            <NLoadingIndicator size={size} />
+                        </div>
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})