mirror of
https://github.com/tabler/tabler.git
synced 2026-11-03 13:38:45 +04:00
Use shared Astro UI components across preview pages (#2724)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
bc24b3ada8
commit
4ea449df1b
390 files changed
+3190
-3127
No files matched your search
@@ -5,7 +5,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import Icon from '@shared/components/Icon.astro'
|
||||
import Icon from '@shared/components/ui/Icon.astro'
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ description: Long-form content styles for markdown-like HTML.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
|
||||
## How it works
|
||||
|
||||
@@ -21,7 +22,7 @@ Wrap your content in the `.prose` class to apply long-form typography styles to
|
||||
This example shows typical content wrapped in `.prose`.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <h1>Getting started with documentation</h1> <p> Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users understand complex concepts quickly and efficiently. </p> <blockquote> <p>Documentation is a love letter that you write to your future self.</p> </blockquote> <p> The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs. </p> </div>
|
||||
<Prose> <h1>Getting started with documentation</h1> <p> Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users understand complex concepts quickly and efficiently. </p> <blockquote> <p>Documentation is a love letter that you write to your future self.</p> </blockquote> <p> The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs. </p> </Prose>
|
||||
</Example>
|
||||
|
||||
## Inline HTML elements
|
||||
@@ -47,7 +48,7 @@ Headings help readers scan long documents quickly. Use them to create a clear hi
|
||||
Inline code is available with `<code>`. For multi-line snippets, use `<pre><code>`.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <p>Inline code looks like <code>console.log("Hello")</code> and uses monospace styling.</p> <pre><code>// Create a function that returns a sum function add(a, b) { return a + b; } </code></pre> </div>
|
||||
<Prose> <p>Inline code looks like <code>console.log("Hello")</code> and uses monospace styling.</p> <pre><code>// Create a function that returns a sum function add(a, b) { return a + b; } </code></pre> </Prose>
|
||||
</Example>
|
||||
|
||||
### Lists
|
||||
@@ -55,7 +56,7 @@ Inline code is available with `<code>`. For multi-line snippets, use `<pre><code
|
||||
Use ordered lists for steps and unordered lists for related points.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <ol> <li>Start with the most important information.</li> <li>Provide context before technical details.</li> <li>Include practical examples.</li> </ol> <ul> <li>Write clear, concise list items.</li> <li>Keep the structure consistent.</li> <li>Avoid overly long items.</li> </ul> </div>
|
||||
<Prose> <ol> <li>Start with the most important information.</li> <li>Provide context before technical details.</li> <li>Include practical examples.</li> </ol> <ul> <li>Write clear, concise list items.</li> <li>Keep the structure consistent.</li> <li>Avoid overly long items.</li> </ul> </Prose>
|
||||
</Example>
|
||||
|
||||
### Images
|
||||
@@ -63,7 +64,7 @@ Use ordered lists for steps and unordered lists for related points.
|
||||
Images should support the text and provide useful context.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" /> <img src="/static/photos/book-on-the-grass.jpg" alt="Book on the grass" /> <img src="/static/photos/stylish-workspace-with-macbook-pro.jpg" alt="Workspace with laptop" /> </div>
|
||||
<Prose> <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" /> <img src="/static/photos/book-on-the-grass.jpg" alt="Book on the grass" /> <img src="/static/photos/stylish-workspace-with-macbook-pro.jpg" alt="Workspace with laptop" /> </Prose>
|
||||
</Example>
|
||||
|
||||
### Tables
|
||||
@@ -71,5 +72,5 @@ Images should support the text and provide useful context.
|
||||
Tables work best for comparing related data points.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <table> <thead> <tr> <th>Name</th> <th>Up-votes</th> <th>Down-votes</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>10</td> <td>11</td> </tr> <tr> <td>Bob</td> <td>4</td> <td>3</td> </tr> <tr> <td>Charlie</td> <td>7</td> <td>9</td> </tr> <tr> <td>Totals</td> <td>21</td> <td>23</td> </tr> </tbody> </table> </div>
|
||||
<Prose> <table> <thead> <tr> <th>Name</th> <th>Up-votes</th> <th>Down-votes</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>10</td> <td>11</td> </tr> <tr> <td>Bob</td> <td>4</td> <td>3</td> </tr> <tr> <td>Charlie</td> <td>7</td> <td>9</td> </tr> <tr> <td>Totals</td> <td>21</td> <td>23</td> </tr> </tbody> </table> </Prose>
|
||||
</Example>
|
||||
@@ -6,6 +6,7 @@ description: Role of typography in interface design.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
|
||||
## Headings
|
||||
|
||||
@@ -114,5 +115,5 @@ To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd
|
||||
If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.prose` class in a container. It will apply the default styles for markdown elements. The `.markdown` class is an alias and will be removed in a future release. The `.wysiwyg` integration (`ui/wysiwyg.html`) is deprecated and will be removed in a future release. See the Prose page for full examples.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <h1>Hello World</h1> <p> Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub >script</sub > works as well! </p> <h2>Second level</h2> <p> Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl. </p> <ul> <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li> <li>Ut non enim metus.</li> </ul> </div>
|
||||
<Prose> <h1>Hello World</h1> <p> Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub >script</sub > works as well! </p> <h2>Second level</h2> <p> Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl. </p> <ul> <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li> <li>Ut non enim metus.</li> </ul> </Prose>
|
||||
</Example>
|
||||
@@ -5,7 +5,7 @@ description: Build collapsible content sections with accordion classes and modif
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ description: An alert message for user notification.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
import Alert from '@shared/components/ui/Alert.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,8 @@ description: Personalize UI with a user avatar.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import AvatarList from '@shared/components/ui/AvatarList.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -76,7 +77,7 @@ Change the shape of an avatar with the default Bootstrap image classes. You can
|
||||
Create a list of avatars within one parent container.
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar-list"> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </div>
|
||||
<AvatarList> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </AvatarList>
|
||||
</Example>
|
||||
|
||||
## Stacked list
|
||||
@@ -84,9 +85,9 @@ Create a list of avatars within one parent container.
|
||||
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar-list avatar-list-stacked"> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </div>
|
||||
<AvatarList stacked={true}> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </AvatarList>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar-list avatar-list-stacked"> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </div>
|
||||
<AvatarList stacked={true}> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </AvatarList>
|
||||
</Example>
|
||||
@@ -5,6 +5,7 @@ description: Add extra information with a badge.
|
||||
bootstrapLink: components/badge/
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import BadgesList from '@shared/components/ui/BadgesList.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import site from '@data/site.json';
|
||||
@@ -16,7 +17,7 @@ export const colors = Object.entries(site.colors);
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
<Example centered>
|
||||
<div class="badges-list">{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</div>
|
||||
<BadgesList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgesList>
|
||||
</Example>
|
||||
|
||||
## Headings
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,8 +5,9 @@ bootstrapLink: components/buttons/
|
||||
description: A customizable button for user actions.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import ButtonGroup from '@shared/components/ui/ButtonGroup.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Button tag
|
||||
|
||||
@@ -272,13 +273,13 @@ Use the `.btn-actions` container to group multiple action buttons together. This
|
||||
Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, segmented controls, or any interface where multiple related actions should be visually grouped.
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-group" role="group"> <button type="button" class="btn">Left</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Right</button> </div>
|
||||
<ButtonGroup> <button type="button" class="btn">Left</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Right</button> </ButtonGroup>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-group" role="group"> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked /> <label class="btn" for="btn-radio-1">Radio 1</label> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off" /> <label class="btn" for="btn-radio-2">Radio 2</label> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off" /> <label class="btn" for="btn-radio-3">Radio 3</label> </div>
|
||||
<ButtonGroup> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked /> <label class="btn" for="btn-radio-1">Radio 1</label> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off" /> <label class="btn" for="btn-radio-2">Radio 2</label> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off" /> <label class="btn" for="btn-radio-3">Radio 3</label> </ButtonGroup>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-group-vertical" role="group"> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </div>
|
||||
<ButtonGroup vertical={true}> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </ButtonGroup>
|
||||
</Example>
|
||||
@@ -6,7 +6,7 @@ description: Organize content with a flexible card.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Default card
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Chart from '@shared/components/Chart.astro'
|
||||
import Chart from '@shared/components/ui/Chart.astro'
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ description: Enhance a dashboard with a custom icon.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Dialogs for notifications and content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Highlight an element with a graphical ribbon.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: A segmented control is a set of two or more segments, each of which fun
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Build star rating UI with stars classes and data-star-rating state
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ description: Transition between two icons smoothly.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ description: Organize content with an interactive tab.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -6,8 +6,9 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Flag from '@shared/components/ui/Flag.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Payment from '@shared/components/ui/Payment.astro';
|
||||
import TagsList from '@shared/components/ui/TagsList.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
@@ -32,7 +33,7 @@ Use `.tag-icon` for a leading icon inside a tag. The icon uses compact size and
|
||||
Use `.tag-avatar`, `.tag-flag`, or `.tag-payment` to add media at the start of the tag. These classes keep spacing aligned with tag content.
|
||||
|
||||
<Example centered>
|
||||
<div class="tags-list"> <span class="tag"> <span class="avatar avatar-xs tag-avatar">AP</span> Alex P. <a href="#" class="btn-close" aria-label="Remove Alex tag"></a> </span> <span class="tag"> <Flag flag="us" size="xxs" class="tag-flag" />United States <a href="#" class="btn-close" aria-label="Remove country tag"></a> </span> <span class="tag"> <Payment provider="visa" size="xxs" class="tag-payment" />Visa <a href="#" class="btn-close" aria-label="Remove payment tag"></a> </span> </div>
|
||||
<TagsList> <span class="tag"> <span class="avatar avatar-xs tag-avatar">AP</span> Alex P. <a href="#" class="btn-close" aria-label="Remove Alex tag"></a> </span> <span class="tag"> <Flag flag="us" size="xxs" class="tag-flag" />United States <a href="#" class="btn-close" aria-label="Remove country tag"></a> </span> <span class="tag"> <Payment provider="visa" size="xxs" class="tag-payment" />Visa <a href="#" class="btn-close" aria-label="Remove payment tag"></a> </span> </TagsList>
|
||||
</Example>
|
||||
|
||||
### With badge
|
||||
@@ -58,7 +59,7 @@ Use `.tag-check` on a checkbox when the tag should be selectable. This variant i
|
||||
Use `.tags-list` for groups of tags. It applies consistent spacing and wrapping between items.
|
||||
|
||||
<Example centered>
|
||||
<div class="tags-list"> <span class="tag">Alpha <a href="#" class="btn-close" aria-label="Remove alpha tag"></a></span> <span class="tag">Beta <a href="#" class="btn-close" aria-label="Remove beta tag"></a></span> <span class="tag">Gamma <a href="#" class="btn-close" aria-label="Remove gamma tag"></a></span> <span class="tag">Delta <a href="#" class="btn-close" aria-label="Remove delta tag"></a></span> </div>
|
||||
<TagsList> <span class="tag">Alpha <a href="#" class="btn-close" aria-label="Remove alpha tag"></a></span> <span class="tag">Beta <a href="#" class="btn-close" aria-label="Remove beta tag"></a></span> <span class="tag">Gamma <a href="#" class="btn-close" aria-label="Remove gamma tag"></a></span> <span class="tag">Delta <a href="#" class="btn-close" aria-label="Remove delta tag"></a></span> </TagsList>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
@@ -4,6 +4,7 @@ summary: Component for visualizing activity logs or other monitoring-related dat
|
||||
description: Monitor data activity visually.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Subheader from '@shared/components/ui/Subheader.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Basic example
|
||||
@@ -17,5 +18,5 @@ import Example from '@shared/components/docs/Example.astro';
|
||||
You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/img/components/cards).
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <div class="subheader">Status monitoring</div> <div class="ms-auto lh-1"> <div class="dropdown"> <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Current month</a > <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item active" href="#">Current month</a> <a class="dropdown-item" href="#">Last month</a> <a class="dropdown-item" href="#">Last 3 months</a> </div> </div> </div> </div> <div class="d-flex align-items-baseline"> <div class="h1 mb-3 me-2">99.5%</div> <div class="me-auto"> <span class="text-green d-inline-flex align-items-center lh-1"> 2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="3 17 9 11 13 15 21 7" /> <polyline points="14 7 21 7 21 14" /> </svg> </span> </div> </div> <div class="mt-2"> <div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div> </div> </div> </div>
|
||||
<div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <Subheader>Status monitoring</Subheader> <div class="ms-auto lh-1"> <div class="dropdown"> <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Current month</a > <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item active" href="#">Current month</a> <a class="dropdown-item" href="#">Last month</a> <a class="dropdown-item" href="#">Last 3 months</a> </div> </div> </div> </div> <div class="d-flex align-items-baseline"> <div class="h1 mb-3 me-2">99.5%</div> <div class="me-auto"> <span class="text-green d-inline-flex align-items-center lh-1"> 2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="3 17 9 11 13 15 21 7" /> <polyline points="14 7 21 7 21 14" /> </svg> </span> </div> </div> <div class="mt-2"> <div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -4,6 +4,7 @@ summary: Use form helpers to provide additional information about a form element
|
||||
description: Provide additional guidance in forms.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import FormHint from '@shared/components/ui/FormHint.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Input help
|
||||
@@ -46,7 +47,7 @@ Use a form hint to provide users with additional information about a form elemen
|
||||
Look at the example below to see how the form hint works:
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label">Email address</label> <input type="email" class="form-control" placeholder="Enter your email address" /> <div class="form-hint">We'll never share your email with anyone else.</div> </div>
|
||||
<div> <label class="form-label">Email address</label> <input type="email" class="form-control" placeholder="Enter your email address" /> <FormHint>We'll never share your email with anyone else.</FormHint> </div>
|
||||
</Example>
|
||||
|
||||
## Additional info inside label
|
||||
|
||||
@@ -78,7 +78,7 @@ Tabler is a pnpm monorepo. The packages you will work with most often are:
|
||||
- `core/` - the framework itself: SCSS sources in `core/scss/` and JavaScript in `core/js/`. This is where CSS classes and components are defined.
|
||||
- `preview/` - the demo website built with [Astro](https://astro.build). Pages live in `preview/pages/*.astro`.
|
||||
- `docs/` - the documentation website, also built with Astro. Pages live in `docs/pages/**/*.mdx`.
|
||||
- `shared/astro/` - Astro components, layouts and helpers shared by the preview and docs websites. Import them with the `@shared` alias, for example `import Button from '@shared/components/Button.astro'`.
|
||||
- `shared/astro/` - Astro components, layouts and helpers shared by the preview and docs websites. Import them with the `@shared` alias, for example `import Button from '@shared/components/ui/Button.astro'`.
|
||||
- `shared/data/` - JSON data used by demo pages. Import it with the `@data` alias.
|
||||
|
||||
A few practical rules:
|
||||
|
||||
@@ -6,8 +6,8 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import NavbarLogo from '@shared/components/NavbarLogo.astro'
|
||||
import Icon from '@shared/components/Icon.astro'
|
||||
import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
|
||||
import Icon from '@shared/components/ui/Icon.astro'
|
||||
|
||||
The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements,
|
||||
and even interactive components like dropdown menus or search bars.
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Examples of Tabler page headers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
|
||||
## Simple header
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
import FormFooter from '@shared/components/ui/FormFooter.astro';
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import ButtonList from '@shared/components/ui/ButtonList.astro';
|
||||
import { addPageScript } from '@shared/lib/page-scripts';
|
||||
|
||||
addPageScript(`<script>
|
||||
@@ -70,12 +72,12 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<div class="btn-list flex-nowrap">
|
||||
<FormFooter>
|
||||
<ButtonList class="flex-nowrap">
|
||||
<Button text="Cancel" block href="2-step-verification.html" />
|
||||
<Button text="Verify" block color="primary" />
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</FormFooter>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
---
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import flags from '@data/flags.json';
|
||||
|
||||
// Liquid: {% if country.code == 'US' %} selected{% endif %} — flags.json entries
|
||||
// have no `code` property, so the reference renders value="" and never `selected`.
|
||||
// We mirror that output exactly.
|
||||
|
||||
import FormFooter from '@shared/components/ui/FormFooter.astro';
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import FormGroup from '@shared/components/ui/FormGroup.astro';
|
||||
import flags from '@data/flags.json';
|
||||
---
|
||||
|
||||
<SingleLayout title="2-Step Verification">
|
||||
@@ -19,29 +21,27 @@ import flags from '@data/flags.json';
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-center mb-4">2-Step Verification</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Country</label>
|
||||
<FormGroup label="Country">
|
||||
<select class="form-select">
|
||||
{flags.map((country) => <option value="">{country.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">Your Phone Number</label>
|
||||
<FormGroup label="Your Phone Number" class="mb-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">+1</span>
|
||||
<input type="text" class="form-control" placeholder="Enter phone number" />
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
<div class="text-secondary">
|
||||
Security is critical in Tabler. to help keep your account safe, we'll
|
||||
text you a verification code when you sign in on a new device
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<FormFooter>
|
||||
<Button element="button" type="submit" text="Send code" block color="primary" />
|
||||
</div>
|
||||
</FormFooter>
|
||||
</div>
|
||||
</form>
|
||||
</SingleLayout>
|
||||
@@ -1,50 +1,51 @@
|
||||
---
|
||||
// Port of preview/pages/accordion.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Accordion from '@shared/components/ui/Accordion.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Accordion" pageHeader="Accordion" pageMenu="base.accordion">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Accordion />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<Card>
|
||||
<Accordion type="flush" id="flush" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Accordion type="tabs" id="tabs" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Accordion type="inverted" id="inverted" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Accordion id="inverted-plus" type="inverted,plus" toggleIcon="plus" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Accordion id="icons" showIcon />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,17 +1,18 @@
|
||||
---
|
||||
// Port of preview/pages/activity.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import ActivityPart from '@shared/components/ui/ActivityPart.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Activity" pageHeader="Activity" pageMenu="extra.activity">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<ActivityPart />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
+34
-32
@@ -1,48 +1,50 @@
|
||||
---
|
||||
// Port of preview/pages/alerts.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
import Alert from '@shared/components/ui/Alert.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Alerts" pageHeader="Alerts" pageMenu="base.alerts">
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Basic alerts</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Basic alerts</CardTitle>
|
||||
<Alert type="danger" title="An error occurred!" />
|
||||
<Alert type="warning" title="Some information is missing!" />
|
||||
<Alert type="success" title="Completed successfully!" />
|
||||
<Alert type="info" title="Just a quick note!" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alerts with action</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Alerts with action</CardTitle>
|
||||
<Alert showClose action="Link" type="danger" title="An error occurred!" />
|
||||
<Alert showClose action="Link" type="warning" title="Some information is missing!" />
|
||||
<Alert showClose action="Link" type="success" title="Completed successfully!" />
|
||||
<Alert showClose action="Link" type="info" title="Just a quick note!" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Dismissible alerts</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Dismissible alerts</CardTitle>
|
||||
<Alert showClose type="danger" title="An error occurred!" />
|
||||
<Alert showClose type="warning" title="Some information is missing!" />
|
||||
<Alert showClose type="success" title="Completed successfully!" />
|
||||
<Alert showClose type="info" title="Just a quick note!" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Alert with a description</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Alert with a description</CardTitle>
|
||||
<Alert
|
||||
showClose
|
||||
type="danger"
|
||||
@@ -67,13 +69,13 @@ import Alert from '@shared/components/Alert.astro';
|
||||
title="Just a quick note!"
|
||||
description="This is a custom alert box with a description."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Important alerts</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Important alerts</CardTitle>
|
||||
<Alert
|
||||
showClose
|
||||
important
|
||||
@@ -84,13 +86,13 @@ import Alert from '@shared/components/Alert.astro';
|
||||
<Alert showClose important type="success" description="This is a custom alert box with a description." />
|
||||
<Alert showClose important type="warning" description="This is a custom alert box with a description." />
|
||||
<Alert showClose important type="info" description="This is a custom alert box with a description." />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Minor alerts</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Minor alerts</CardTitle>
|
||||
<Alert
|
||||
showClose
|
||||
minor
|
||||
@@ -101,8 +103,8 @@ import Alert from '@shared/components/Alert.astro';
|
||||
<Alert showClose minor type="success" description="This is a custom alert box with a description." />
|
||||
<Alert showClose minor type="warning" description="This is a custom alert box with a description." />
|
||||
<Alert showClose minor type="info" description="This is a custom alert box with a description." />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
+211
-265
@@ -1,17 +1,27 @@
|
||||
---
|
||||
// Port of preview/pages/all-elements.html — a kitchen-sink of every component.
|
||||
|
||||
// Code-block content lives in the frontmatter so Astro does not try to evaluate
|
||||
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.
|
||||
|
||||
import ButtonGroup from '@shared/components/ui/ButtonGroup.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import ButtonList from '@shared/components/ui/ButtonList.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardFooter from '@shared/components/ui/CardFooter.astro';
|
||||
import Alert from '@shared/components/ui/Alert.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import Select from '@shared/components/ui/Select.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import FormGroup from '@shared/components/ui/FormGroup.astro';
|
||||
import Nav from '@shared/components/ui/Nav.astro';
|
||||
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Dropdown from '@shared/components/ui/Dropdown.astro';
|
||||
import Accordion from '@shared/components/ui/Accordion.astro';
|
||||
import Spinner from '@shared/components/ui/Spinner.astro';
|
||||
@@ -20,7 +30,7 @@ import Steps from '@shared/components/ui/Steps.astro';
|
||||
import StatusDot from '@shared/components/ui/StatusDot.astro';
|
||||
import Toast from '@shared/components/ui/Toast.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import InputGroup from '@shared/components/InputGroup.astro';
|
||||
import InputGroup from '@shared/components/ui/InputGroup.astro';
|
||||
import Range from '@shared/components/ui/Range.astro';
|
||||
import Tag from '@shared/components/ui/Tag.astro';
|
||||
import Ribbon from '@shared/components/ui/Ribbon.astro';
|
||||
@@ -29,9 +39,9 @@ import Payment from '@shared/components/ui/Payment.astro';
|
||||
import Timeline from '@shared/components/ui/Timeline.astro';
|
||||
import Empty from '@shared/components/ui/Empty.astro';
|
||||
import NavSegmented from '@shared/components/ui/NavSegmented.astro';
|
||||
import ListGroup from '@shared/components/ui/ListGroup.astro';
|
||||
import ListGroupItem from '@shared/components/ui/ListGroupItem.astro';
|
||||
|
||||
// Code-block content lives in the frontmatter so Astro does not try to evaluate
|
||||
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.
|
||||
const codeExample = `// JavaScript example
|
||||
function greetUser(name) {
|
||||
console.log(\`Hello, \${name}!\`);
|
||||
@@ -48,11 +58,9 @@ function greetUser(name) {
|
||||
<div class="row row-cards">
|
||||
<!-- Typography Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Typography</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Typography" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h1>Heading 1</h1>
|
||||
@@ -72,21 +80,19 @@ function greetUser(name) {
|
||||
<p class="text-danger">Danger text color</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Buttons" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Standard Buttons</h4>
|
||||
<div class="btn-list mb-3">
|
||||
<ButtonList class="mb-3">
|
||||
<Button text="Default" />
|
||||
<Button text="Primary" color="primary" icon="star" />
|
||||
<Button text="Secondary" color="secondary" />
|
||||
@@ -94,79 +100,71 @@ function greetUser(name) {
|
||||
<Button text="Warning" color="warning" />
|
||||
<Button text="Danger" color="danger" icon="x" />
|
||||
<Button text="Info" color="info" />
|
||||
</div>
|
||||
</ButtonList>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Button Sizes</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
<ButtonList class="mb-3 align-items-start">
|
||||
<Button text="Small" size="sm" />
|
||||
<Button text="Default" />
|
||||
<Button text="Large" size="lg" />
|
||||
</div>
|
||||
</ButtonList>
|
||||
|
||||
<h4>Icon Buttons</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
<ButtonList class="mb-3 align-items-start">
|
||||
<Button icon="heart" iconOnly />
|
||||
<Button icon="star" iconOnly />
|
||||
<Button icon="check" iconOnly />
|
||||
</div>
|
||||
</ButtonList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Cards Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Simple Card" />
|
||||
<CardBody>
|
||||
<p>This is a simple card with header and body content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with Footer</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Card with Footer" />
|
||||
<CardBody>
|
||||
<p>This card includes a footer section.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<div class="d-flex">
|
||||
<a class="btn btn-link">Cancel</a>
|
||||
<a class="btn btn-primary ms-auto">Save</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Alerts Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Alerts</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Alerts" />
|
||||
<CardBody>
|
||||
<Alert type="info" title="This is a primary alert with an icon." />
|
||||
<Alert type="success" title="This is a success alert message." />
|
||||
<Alert type="warning" title="This is a warning alert message." />
|
||||
<Alert type="danger" title="This is a danger alert message." />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Badges Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Badges</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Badges" />
|
||||
<CardBody>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Badge text="Default" />
|
||||
@@ -181,17 +179,15 @@ function greetUser(name) {
|
||||
<Badge text="Light Badge" color="primary" light />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Progress Bars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Progress Bars" />
|
||||
<CardBody>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Progress value="25" />
|
||||
@@ -206,68 +202,56 @@ function greetUser(name) {
|
||||
<Progress value="90" color="danger" showValue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Form Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Form Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Form Elements" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text Input</label>
|
||||
<FormGroup label="Text Input">
|
||||
<input type="text" class="form-control" placeholder="Enter text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email Input</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Email Input">
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password Input</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Password Input">
|
||||
<input type="password" class="form-control" placeholder="Enter password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Dropdown</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Select Dropdown">
|
||||
<Select id="demo-select" values="Option 1,Option 2,Option 3" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea</label>
|
||||
<FormGroup label="Textarea">
|
||||
<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Checkboxes">
|
||||
<Check title="Option 1" type="checkbox" />
|
||||
<Check title="Option 2" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Radio Buttons</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Radio Buttons">
|
||||
<Check title="Option 1" type="radio" name="radio-demo" />
|
||||
<Check title="Option 2" type="radio" name="radio-demo" checked />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Switch</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Switch">
|
||||
<Check title="Enable notifications" switch />
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Elements -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Navigation Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Navigation Elements" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tabs</h4>
|
||||
@@ -293,17 +277,15 @@ function greetUser(name) {
|
||||
<Pagination count={3} text />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Lists Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Lists</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Lists" />
|
||||
<CardBody>
|
||||
<h4>Unordered List</h4>
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
@@ -317,17 +299,15 @@ function greetUser(name) {
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Table</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Table" />
|
||||
<CardBody>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
@@ -356,17 +336,15 @@ function greetUser(name) {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Avatars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Avatars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Avatars" />
|
||||
<CardBody>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Avatar placeholder="JD" size="sm" />
|
||||
@@ -385,17 +363,15 @@ function greetUser(name) {
|
||||
<Avatar placeholder="ST" status="success" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Icons Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Icons" />
|
||||
<CardBody>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Icon name="home" />
|
||||
@@ -430,32 +406,28 @@ function greetUser(name) {
|
||||
<span class="text-danger"><Icon name="alert-circle" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Dropdowns Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dropdowns</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Dropdowns" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
<Dropdown mainBtn="Primary Dropdown" options="Action, Another action, Something else here" />
|
||||
<Dropdown mainBtn="Secondary Dropdown" options="Edit, Copy, Delete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Interactive Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Interactive Elements" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Accordion</h4>
|
||||
@@ -488,17 +460,15 @@ function greetUser(name) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Status & Feedback Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Status Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Status Elements" />
|
||||
<CardBody>
|
||||
<h4>Status Dots</h4>
|
||||
<div class="mb-3">
|
||||
<StatusDot color="success" />
|
||||
@@ -511,17 +481,15 @@ function greetUser(name) {
|
||||
<div class="mb-3">
|
||||
<Toast toastId="demo-toast" show text="This is a sample toast message!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Form Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Enhanced Forms</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Enhanced Forms" />
|
||||
<CardBody>
|
||||
<h4>Input with Icons</h4>
|
||||
<div class="mb-3">
|
||||
<InputIcon placeholder="Search..." icon="search" />
|
||||
@@ -542,17 +510,15 @@ function greetUser(name) {
|
||||
<div class="mb-3">
|
||||
<Range id="demo-range" min={0} max={100} value="50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Tags & Labels -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tags & Labels</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Tags & Labels" />
|
||||
<CardBody>
|
||||
<h4>Tags</h4>
|
||||
<div class="mb-3">
|
||||
<Tag text="Primary Tag" icon="star" />
|
||||
@@ -567,17 +533,15 @@ function greetUser(name) {
|
||||
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
<Ribbon text="Sale" color="danger" top />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Media Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Media Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Media Elements" />
|
||||
<CardBody>
|
||||
<h4>Flags</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@@ -615,29 +579,25 @@ function greetUser(name) {
|
||||
<Payment payment="square" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Timeline</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Timeline" />
|
||||
<CardBody>
|
||||
<Timeline />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Empty State Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Empty State</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Empty State" />
|
||||
<CardBody>
|
||||
<Empty
|
||||
title="No data found"
|
||||
subtitle="Try adjusting your search or filter to find what you're looking for."
|
||||
@@ -645,25 +605,23 @@ function greetUser(name) {
|
||||
buttonText="Add new item"
|
||||
buttonIcon="plus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Modal Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modals</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Modals" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo">
|
||||
Open Modal
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
|
||||
Success Modal
|
||||
</button>
|
||||
</div>
|
||||
</ButtonList>
|
||||
|
||||
<!-- Demo Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-demo" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
@@ -708,54 +666,50 @@ function greetUser(name) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Button Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Button Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Button Groups" />
|
||||
<CardBody>
|
||||
<h4>Basic Button Group</h4>
|
||||
<div class="btn-group mb-3" role="group">
|
||||
<ButtonGroup class="mb-3">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>Button Toolbar</h4>
|
||||
<div class="btn-toolbar mb-3" role="toolbar">
|
||||
<div class="btn-group me-2" role="group">
|
||||
<ButtonGroup class="me-2">
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<button type="button" class="btn">4</button>
|
||||
<button type="button" class="btn">5</button>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<h4>Vertical Button Group</h4>
|
||||
<div class="btn-group-vertical" role="group">
|
||||
<ButtonGroup vertical={true}>
|
||||
<button type="button" class="btn">Top</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Bottom</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Segmented Navigation Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Segmented Navigation</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Segmented Navigation" />
|
||||
<CardBody>
|
||||
<h4>Basic Segmented</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="Home,Profile,Settings" />
|
||||
@@ -775,17 +729,15 @@ function greetUser(name) {
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="Home,Profile,Settings" icons="home,user,settings" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Collapse Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapse</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Collapse" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Basic Collapse</h4>
|
||||
@@ -800,14 +752,14 @@ function greetUser(name) {
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Multiple Targets</h4>
|
||||
<div class="btn-list">
|
||||
<ButtonList>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1">
|
||||
Toggle First
|
||||
</button>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">
|
||||
Toggle Second
|
||||
</button>
|
||||
</div>
|
||||
</ButtonList>
|
||||
<div class="collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body mb-2">
|
||||
First collapsible content.
|
||||
@@ -820,21 +772,19 @@ function greetUser(name) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Tooltips & Popovers Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tooltips & Popovers</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Tooltips & Popovers" />
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tooltips</h4>
|
||||
<div class="btn-list">
|
||||
<ButtonList>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Top
|
||||
</button>
|
||||
@@ -847,64 +797,60 @@ function greetUser(name) {
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Left
|
||||
</button>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Popovers</h4>
|
||||
<div class="btn-list">
|
||||
<ButtonList>
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top">
|
||||
Top Popover
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right">
|
||||
Right Popover
|
||||
</button>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- List Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">List Groups</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item">
|
||||
<Card>
|
||||
<CardHeader title="List Groups" />
|
||||
<CardBody class="p-0">
|
||||
<ListGroup flush>
|
||||
<ListGroupItem>
|
||||
<Icon name="home" class="me-2" />
|
||||
Home
|
||||
</div>
|
||||
<div class="list-group-item active">
|
||||
</ListGroupItem>
|
||||
<ListGroupItem active>
|
||||
<Icon name="star" class="me-2" />
|
||||
Active item
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
</ListGroupItem>
|
||||
<ListGroupItem>
|
||||
<Icon name="settings" class="me-2" />
|
||||
Settings
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
</ListGroupItem>
|
||||
<ListGroupItem>
|
||||
<Icon name="user" class="me-2" />
|
||||
Profile
|
||||
</div>
|
||||
<div class="list-group-item disabled">
|
||||
</ListGroupItem>
|
||||
<ListGroupItem disabled>
|
||||
<Icon name="lock" class="me-2" />
|
||||
Disabled item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Content Elements Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Content Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Content Elements" />
|
||||
<CardBody>
|
||||
<h4>Blockquote</h4>
|
||||
<blockquote class="blockquote mb-4">
|
||||
<p>This is a blockquote example with some sample text to demonstrate the styling.</p>
|
||||
@@ -918,8 +864,8 @@ function greetUser(name) {
|
||||
|
||||
<h4>Inline Elements</h4>
|
||||
<p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/auth-lock.html (layout: single; the front matter
|
||||
// title really is "Forgot password" in the Liquid source)
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import AuthLockCard from '@shared/components/cards/AuthLockCard.astro';
|
||||
|
||||
+63
-60
@@ -1,10 +1,13 @@
|
||||
---
|
||||
// Port of preview/pages/avatars.html (layout: default)
|
||||
// Note: the `description` front matter key is inert in the dev build (no
|
||||
// <meta name="description"> in the reference output), so it is not ported.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import AvatarUpload from '@shared/components/ui/AvatarUpload.astro';
|
||||
import AvatarList from '@shared/components/ui/AvatarList.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import people from '@data/people.json';
|
||||
import { site } from '@shared/lib/site';
|
||||
|
||||
@@ -29,71 +32,71 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch'];
|
||||
<DefaultLayout title="Avatars" pageMenu="base.avatars" pageHeader="Avatars">
|
||||
<div class="row row-cards">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Default avatar</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Default avatar</CardTitle>
|
||||
<Avatar />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar with icon</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar with icon</CardTitle>
|
||||
|
||||
<div class="avatar-list">
|
||||
{iconIcons.map((icon) => <Avatar icon={icon} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar with icon</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar with icon</CardTitle>
|
||||
|
||||
<div class="avatar-list">
|
||||
{colors.map((color) => <Avatar icon="user" color={color} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Simple avatar</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Simple avatar</CardTitle>
|
||||
<div class="avatar-list">
|
||||
{people8.map((person) => <Avatar person={person} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar placeholder</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar placeholder</CardTitle>
|
||||
<div class="avatar-list">
|
||||
{people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar shapes</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar shapes</CardTitle>
|
||||
<div class="avatar-list">
|
||||
<Avatar />
|
||||
<Avatar class="rounded-circle" />
|
||||
<Avatar class="rounded-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar sizes</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar sizes</CardTitle>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-list">
|
||||
@@ -106,63 +109,63 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch'];
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar lists</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar lists</CardTitle>
|
||||
<div class="row g-3">
|
||||
{
|
||||
listSizes.map((size) => (
|
||||
<>
|
||||
<div class="col-6">
|
||||
<div class={`avatar-list avatar-list-stacked avatar-list-${size}`}>
|
||||
<AvatarList stacked={true} size={size}>
|
||||
{people5.map((person) => (
|
||||
<Avatar person={person} />
|
||||
))}
|
||||
<Avatar icon="plus" link />
|
||||
</div>
|
||||
</AvatarList>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class={`avatar-list avatar-list-stacked avatar-list-${size}`}>
|
||||
<AvatarList stacked={true} size={size}>
|
||||
{people5.map((person) => (
|
||||
<Avatar person={person} class="rounded-circle" />
|
||||
))}
|
||||
<Avatar icon="plus" link class="rounded-circle" />
|
||||
</div>
|
||||
</AvatarList>
|
||||
</div>
|
||||
</>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar placeholder</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar placeholder</CardTitle>
|
||||
{uploadSizes.map((size) => <AvatarUpload size={size} />)}
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar statuses</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar statuses</CardTitle>
|
||||
{statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)}
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Avatar brands</h2>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle as="h2">Avatar brands</CardTitle>
|
||||
{brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)}
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
+73
-67
@@ -1,11 +1,17 @@
|
||||
---
|
||||
// Port of preview/pages/badges.html (layout: default)
|
||||
|
||||
// Liquid: colors = ['default'] + site.colors keys + ['dark', 'light']
|
||||
|
||||
import BadgesList from '@shared/components/ui/BadgesList.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import ButtonList from '@shared/components/ui/ButtonList.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import DropdownMenu from '@shared/components/ui/DropdownMenu.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
// Liquid: colors = ['default'] + site.colors keys + ['dark', 'light']
|
||||
const colors = ['default', ...Object.keys(site.colors), 'dark', 'light'];
|
||||
const sizes = ['sm', 'md', 'lg'];
|
||||
|
||||
@@ -18,26 +24,26 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
<div class="col-4">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Badge sizes</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Badge sizes</CardTitle>
|
||||
|
||||
<div class="space-y">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div class="badges-list">
|
||||
<BadgesList>
|
||||
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span>
|
||||
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
|
||||
<Icon name="check" /> Left icon
|
||||
@@ -48,19 +54,19 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
<span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}>
|
||||
<Icon name="star" type="filled" />
|
||||
</span>
|
||||
</div>
|
||||
</BadgesList>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Positioned badges</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Positioned badges</CardTitle>
|
||||
|
||||
<div class="btn-list">
|
||||
<ButtonList>
|
||||
<button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
@@ -90,49 +96,49 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
<Icon name="bell" />
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic badges</h3>
|
||||
<div class="badges-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Basic badges</CardTitle>
|
||||
<BadgesList>
|
||||
{colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BadgesList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Light badges</h3>
|
||||
<div class="badges-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Light badges</CardTitle>
|
||||
<BadgesList>
|
||||
{colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BadgesList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Outline badges</h3>
|
||||
<div class="badges-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Outline badges</CardTitle>
|
||||
<BadgesList>
|
||||
{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BadgesList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Badges with icons</h3>
|
||||
<div class="badges-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Badges with icons</CardTitle>
|
||||
<BadgesList>
|
||||
{
|
||||
colors.map((color) => (
|
||||
<span class={`badge bg-${color} text-${color}-fg`}>
|
||||
@@ -141,9 +147,9 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BadgesList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,9 +157,9 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
<div class="col-sm-6 col-lg-9">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
colors.map((color, index) => (
|
||||
<button class="btn">
|
||||
@@ -161,14 +167,14 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
colors.map((color, index) => (
|
||||
<button class="btn position-relative">
|
||||
@@ -177,14 +183,14 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
colors.map((color) => (
|
||||
<button class="btn position-relative">
|
||||
@@ -192,9 +198,9 @@ const ucFirst = (value: string) => value.charAt(0).toUpperCase() + value.slice(1
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/blank.html (layout: default). The `blank: true`
|
||||
// front matter is inert in the Liquid templates (never referenced) — the
|
||||
// empty page header comes from the missing `page-header` key.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
|
||||
+81
-100
@@ -1,8 +1,11 @@
|
||||
---
|
||||
// Port of preview/pages/buttons.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import ButtonList from '@shared/components/ui/ButtonList.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
type ColorEntry = [string, { title: string; icon?: string }];
|
||||
@@ -20,139 +23,121 @@ const sizes = ['sm', 'md', 'lg', 'xl'];
|
||||
<DefaultLayout title="Buttons" pageHeader="Buttons" pageMenu="base.buttons">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Standard Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Standard Buttons" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Outline Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Outline Buttons" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-outline btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ghost Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Ghost Buttons" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-ghost btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Square Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Square Buttons" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-square btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pill Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Pill Buttons" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
themeColors.map(([name, color]) => (
|
||||
<a class={`btn btn-pill btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Extra colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Extra colors" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
colors.map(([name, color]) => (
|
||||
<a class={`btn btn-${name}`}>{color.icon && <Icon name={color.icon} />} {color.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Icon buttons" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
socialColors.map(([name, app]) => (
|
||||
<a class={`btn btn-icon btn-${name}`}>{app.icon && <Icon name={app.icon} />}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Social colors" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
{
|
||||
socialColors.map(([name, app]) => (
|
||||
<a class={`btn btn-${name}`}>{app.icon && <Icon name={app.icon} />} {app.title}</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Action buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Action buttons" />
|
||||
<CardBody>
|
||||
<div class="btn-actions">
|
||||
{
|
||||
actions.map((action) => (
|
||||
@@ -162,16 +147,14 @@ const sizes = ['sm', 'md', 'lg', 'xl'];
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons with icon</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Card>
|
||||
<CardHeader title="Buttons with icon" />
|
||||
<CardBody>
|
||||
<ButtonList>
|
||||
<a class="btn btn-animate-icon">Save <Icon name="arrow-right" class="icon-end" /></a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate"><Icon name="plus" /> Add</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake"><Icon name="bell" /> Notifications</a>
|
||||
@@ -181,30 +164,28 @@ const sizes = ['sm', 'md', 'lg', 'xl'];
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada"><Icon name="check" /> Confirm</a>
|
||||
<a class="btn btn-animate-icon">Next <Icon name="chevron-right" class="icon-end" /></a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start"><Icon name="chevron-left" /> Previous</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonList>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons size</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Buttons size" />
|
||||
<CardBody>
|
||||
<div class="space-y">
|
||||
{
|
||||
sizes.map((size) => (
|
||||
<div class="btn-list">
|
||||
<ButtonList>
|
||||
<Button size={size} text="Button" />
|
||||
<Button size={size} icon="star" iconOnly />
|
||||
<Button size={size} icon="star" text="Button" />
|
||||
<Button size={size} iconEnd="star" text="Button" />
|
||||
</div>
|
||||
</ButtonList>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,10 +1,15 @@
|
||||
---
|
||||
// Port of preview/pages/card-actions.html.
|
||||
|
||||
import CardSubtitle from '@shared/components/ui/CardSubtitle.astro';
|
||||
import CardActions from '@shared/components/ui/CardActions.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import people from '@data/people.json';
|
||||
|
||||
const person0 = people[0];
|
||||
@@ -14,42 +19,38 @@ const person3 = people[3];
|
||||
<DefaultLayout title="Card actions" pageHeader="Card actions" pageMenu="base.cards.actions">
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Sample card</h3>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader title="Sample card" />
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with action</h3>
|
||||
<div class="card-actions">
|
||||
<Card>
|
||||
<CardHeader title="Card with action">
|
||||
<CardActions>
|
||||
<Button color="primary" icon="plus" text="Add new" />
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Cart title</h3>
|
||||
<div class="card-actions">
|
||||
<Card>
|
||||
<CardHeader title="Cart title">
|
||||
<CardActions>
|
||||
<Button icon="phone" text="Phone" />
|
||||
<Button icon="mail" text="Email" />
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
@@ -57,57 +58,57 @@ const person3 = people[3];
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-title">{person0.full_name}</div>
|
||||
<div class="card-subtitle">{person0.job_title}</div>
|
||||
<CardSubtitle as="div">{person0.job_title}</CardSubtitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<Button icon="phone" text="Phone" />
|
||||
<Button icon="mail" text="Email" />
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div>
|
||||
<h3 class="card-title">
|
||||
<CardTitle>
|
||||
With description
|
||||
</h3>
|
||||
<p class="card-subtitle">
|
||||
</CardTitle>
|
||||
<CardSubtitle>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing.
|
||||
</p>
|
||||
</CardSubtitle>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div>
|
||||
<h3 class="card-title">
|
||||
<CardTitle>
|
||||
With description and action
|
||||
</h3>
|
||||
<p class="card-subtitle">
|
||||
</CardTitle>
|
||||
<CardSubtitle>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing.
|
||||
</p>
|
||||
</CardSubtitle>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<Button color="primary" text="Create new job" />
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
@@ -115,11 +116,11 @@ const person3 = people[3];
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-title">{person3.full_name}</div>
|
||||
<div class="card-subtitle">{person3.job_title}</div>
|
||||
<CardSubtitle as="div">{person3.job_title}</CardSubtitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><Icon name="dots-vertical" /></a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
@@ -128,25 +129,24 @@ const person3 = people[3];
|
||||
<a class="dropdown-item text-danger" href="#">Delete user</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card actions</h3>
|
||||
<div class="card-actions btn-actions">
|
||||
<Card>
|
||||
<CardHeader title="Card actions">
|
||||
<CardActions class="btn-actions">
|
||||
<a href="#" class="btn-action"><Icon name="refresh" /></a>
|
||||
<a href="#" class="btn-action"><Icon name="chevron-up" /></a>
|
||||
<a href="#" class="btn-action"><Icon name="dots-vertical" /></a>
|
||||
<a href="#" class="btn-action"><Icon name="x" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/card-gradients.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Welcome from '@shared/components/cards/Welcome.astro';
|
||||
import DeleteConfirm from '@shared/components/cards/DeleteConfirm.astro';
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/cards-masonry.html.
|
||||
// The masonry library is loaded via page-libs=[masonry] (BaseLayout emits the
|
||||
// CDN <script> from core/libs.json); auto-init is triggered by the
|
||||
// data-masonry attribute, so there is no page-level init script.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro';
|
||||
|
||||
const heights = [200, 150, 400, 300, 350, 600, 700, 200, 150, 250, 50, 400, 300, 200];
|
||||
@@ -19,9 +19,9 @@ const heights = [200, 150, 400, 300, 350, 600, 700, 200, 150, 250, 50, 400, 300,
|
||||
{
|
||||
heights.map((height) => (
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
<div class="card">
|
||||
<Card>
|
||||
<BodyPlaceholder height={height} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
+19
-21
@@ -1,7 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/cards.html (layout: default)
|
||||
|
||||
import CardSubtitle from '@shared/components/ui/CardSubtitle.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import CardStamp from '@shared/components/ui/CardStamp.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import Card from '@shared/components/cards/Card.astro';
|
||||
import CardImage from '@shared/components/cards/CardImage.astro';
|
||||
import CardTabs from '@shared/components/cards/CardTabs.astro';
|
||||
@@ -21,7 +23,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<CardTitle>Card title</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">Simple card</div>
|
||||
</div>
|
||||
@@ -29,7 +31,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-light">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<CardTitle>Card title</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">Card with header background</div>
|
||||
</div>
|
||||
@@ -37,7 +39,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-borderless">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<CardTitle>Card title</CardTitle>
|
||||
<div>Card without border</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +47,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title <span class="card-subtitle">Subtitle</span></h3>
|
||||
<CardTitle>Card title <CardSubtitle as="span">Subtitle</CardSubtitle></CardTitle>
|
||||
</div>
|
||||
<div class="card-body">Card with title and subtitle</div>
|
||||
</div>
|
||||
@@ -95,13 +97,9 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-yellow">
|
||||
<Icon name="bell" />
|
||||
</div>
|
||||
</div>
|
||||
<CardStamp icon="bell" color="yellow" />
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with icon bg</h3>
|
||||
<CardTitle>Card with icon bg</CardTitle>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga
|
||||
fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
|
||||
@@ -112,7 +110,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card bg-primary-lt">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with primary light background</h3>
|
||||
<CardTitle>Card with primary light background</CardTitle>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga
|
||||
fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.
|
||||
@@ -161,7 +159,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with footer</h3>
|
||||
<CardTitle>Card with footer</CardTitle>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
|
||||
minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
@@ -173,7 +171,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with transparent footer</h3>
|
||||
<CardTitle>Card with transparent footer</CardTitle>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque
|
||||
minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
|
||||
@@ -196,7 +194,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Cards inside card</h3>
|
||||
<CardTitle>Cards inside card</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row row-cards">
|
||||
@@ -206,7 +204,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="card">
|
||||
<div class={`card-status-top bg-${cardsStackColors[i]}`} />
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{name} card</h3>
|
||||
<CardTitle>{name} card</CardTitle>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
@@ -224,7 +222,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
cardsStack.map((name) => (
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{name} card</h3>
|
||||
<CardTitle>{name} card</CardTitle>
|
||||
</div>
|
||||
<BodyPlaceholder />
|
||||
</div>
|
||||
@@ -238,7 +236,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<CardTitle>Card title</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is a wider card with supporting text below as a natural lead-in to additional content. This content
|
||||
@@ -250,7 +248,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card title</h3>
|
||||
<CardTitle>Card title</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This card has supporting text below as a natural lead-in to additional content.
|
||||
@@ -261,7 +259,7 @@ const cardsStackColors = ['red', 'green', 'blue'];
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with very long content</h3>
|
||||
<CardTitle>Card with very long content</CardTitle>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
This is a wider card with supporting text below as a natural lead-in to additional content. This card has
|
||||
|
||||
+13
-15
@@ -1,9 +1,11 @@
|
||||
---
|
||||
// Port of preview/pages/charts.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Activity from '@shared/components/parts/charts/Activity.astro';
|
||||
import SocialReferrals from '@shared/components/cards/charts/SocialReferrals.astro';
|
||||
import Chart from '@shared/components/Chart.astro';
|
||||
import Chart from '@shared/components/ui/Chart.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import chartsData from '@data/charts.json';
|
||||
|
||||
const demoCharts = Object.entries(
|
||||
@@ -27,26 +29,22 @@ const demoCharts = Object.entries(
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Chart chartId="tasks-overview" height={20} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{
|
||||
demoCharts.map(([chartId, chart]) => (
|
||||
<div class="col-lg-6 col-xl-4">
|
||||
<div class="card">
|
||||
{chart.name && (
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{chart.name}</h3>
|
||||
</div>
|
||||
)}
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
{chart.name && <CardHeader title={chart.name} />}
|
||||
<CardBody>
|
||||
<Chart chartId={chartId} height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
// Port of preview/pages/chat.html (layout: default)
|
||||
// Front matter page-container-class: "flex-fill d-flex flex-column" → containerClass prop.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Chat from '@shared/components/ui/Chat.astro';
|
||||
import people from '@data/people.json';
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
// Port of preview/pages/colorpicker.html (layout: default).
|
||||
// Liquid: {% for color in site.colors %} — forloop.index (1-based) → id,
|
||||
// color[1].hex → value.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import Colorpicker from '@shared/components/ui/Colorpicker.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
@@ -15,9 +17,9 @@ const colors = Object.values(site.colors) as { hex: string }[];
|
||||
pageMenu="plugins.colorpicker"
|
||||
pageLibs={['coloris.js']}
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Basic</CardTitle>
|
||||
<div class="row g-3">
|
||||
{
|
||||
colors.map((color, index) => (
|
||||
@@ -29,6 +31,6 @@ const colors = Object.values(site.colors) as { hex: string }[];
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</DefaultLayout>
|
||||
+43
-45
@@ -1,7 +1,11 @@
|
||||
---
|
||||
// Port of preview/pages/colors.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import FormGroup from '@shared/components/ui/FormGroup.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }];
|
||||
@@ -19,15 +23,15 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
<DefaultLayout title="Colors" pageHeader="Colors" pageMenu="base.colors">
|
||||
<div class="row row-cards">
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row g-3">
|
||||
{
|
||||
colors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name} text-${name}-fg avatar-square`}>{color.abbr}</div>
|
||||
<Avatar square class={`bg-${name} text-${name}-fg`} placeholder={color.abbr} />
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
@@ -39,19 +43,19 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row g-3">
|
||||
{
|
||||
lightColors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name}-lt text-${name}-lt-fg avatar-square`}>{color.abbr}</div>
|
||||
<Avatar square class={`bg-${name}-lt text-${name}-lt-fg`} placeholder={color.abbr} />
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
@@ -63,19 +67,19 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row g-3">
|
||||
{
|
||||
grayColors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name} text-${name}-fg avatar-square`}>{color.abbr}</div>
|
||||
<Avatar square class={`bg-${name} text-${name}-fg`} placeholder={color.abbr} />
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
@@ -87,21 +91,19 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row g-3">
|
||||
{
|
||||
socialColors.map(([name, color]) => (
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class={`avatar bg-${name} text-${name}-fg avatar-square`}>
|
||||
{color.icon && <Icon name={color.icon} />}
|
||||
</div>
|
||||
<Avatar square class={`bg-${name} text-${name}-fg`} icon={color.icon} />
|
||||
</div>
|
||||
<div class="col">
|
||||
{color.title}
|
||||
@@ -113,26 +115,24 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Gradient</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Gradient</CardTitle>
|
||||
<form action="">
|
||||
<div class="row g-4">
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">From</label>
|
||||
<FormGroup label="From" class="">
|
||||
<select class="form-select" name="color-from">
|
||||
{gradientColors.map((color) => <option value={color}>{color}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">To</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="To" class="mt-3">
|
||||
<select class="form-select" name="color-to">
|
||||
{
|
||||
gradientColors.map((color) => (
|
||||
@@ -142,18 +142,16 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>
|
||||
<label class="form-label">Via</label>
|
||||
<FormGroup label="Via" class="">
|
||||
<select class="form-select" name="color-via">
|
||||
<option></option>
|
||||
{gradientColors.map((color) => <option value={color}>{color}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="form-label">Direction</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Direction" class="mt-3">
|
||||
<select class="form-select" name="color-direction">
|
||||
<option value="to-t">to top</option>
|
||||
<option value="to-te">to top right</option>
|
||||
@@ -164,7 +162,7 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
<option value="to-s">to left</option>
|
||||
<option value="to-ts">to top left</option>
|
||||
</select>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="border rounded bg-pattern-transparent overflow-hidden">
|
||||
@@ -178,12 +176,12 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-y">
|
||||
@@ -204,8 +202,8 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
---
|
||||
// Port of preview/pages/cookie-banner.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Offcanvas from '@shared/components/ui/Offcanvas.astro';
|
||||
import OffcanvasBody from '@shared/components/ui/OffcanvasBody.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Cookie banner" pageHeader="Cookie banner" pageMenu="extra.cookie-banner">
|
||||
<div
|
||||
class="offcanvas offcanvas-bottom h-auto show"
|
||||
tabindex="-1"
|
||||
id="offcanvasBottom"
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
>
|
||||
<div class="offcanvas-body">
|
||||
<Offcanvas direction="bottom" show class="h-auto" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
|
||||
<OffcanvasBody>
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
@@ -30,6 +25,6 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</OffcanvasBody>
|
||||
</Offcanvas>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/dashboard-crm.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import CrmStats from '@shared/components/cards/CrmStats.astro';
|
||||
import MrrOverview from '@shared/components/cards/charts/MrrOverview.astro';
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
---
|
||||
import CardActions from '@shared/components/ui/CardActions.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Trending from '@shared/components/ui/Trending.astro';
|
||||
import CardDropdown from '@shared/components/ui/CardDropdown.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import NavSegmented from '@shared/components/ui/NavSegmented.astro';
|
||||
import Chart from '@shared/components/Chart.astro';
|
||||
import Chart from '@shared/components/ui/Chart.astro';
|
||||
import SwitchIcon from '@shared/components/ui/SwitchIcon.astro';
|
||||
import cryptoCurrencies from '@data/crypto-currencies.json';
|
||||
import cryptoMarkets from '@data/crypto-markets.json';
|
||||
@@ -49,8 +53,8 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">Total balance</h5>
|
||||
@@ -67,13 +71,13 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
<Trending value={btc.p24h} />
|
||||
<span class="text-muted">Since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">USD/BTC</h5>
|
||||
@@ -89,13 +93,13 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {btc['volume-24h']}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">LTC/BTC</h5>
|
||||
@@ -111,13 +115,13 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {ltc['volume-24h'].replace('$', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">ETH/BTC</h5>
|
||||
@@ -133,13 +137,13 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {eth['volume-24h'].replace('$', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">XMR/BTC</h5>
|
||||
@@ -155,21 +159,21 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {xmr['volume-24h'].replace('$', '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5 class="card-title mb-0">Markets</h5>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<CardDropdown />
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -200,36 +204,36 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5 class="card-title mb-0">LTC/BTC</h5>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<NavSegmented items="1m,5m,30m,1h,1d" name="timeframe" size="sm" default={2} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Chart chartId="dashboard-crypto-candlestick" height={28} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-12 col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5 class="card-title mb-0">Operations</h5>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<NavSegmented items="Buy,Sell,Send" name="operations" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
|
||||
<div class="card-body">
|
||||
<CardBody>
|
||||
<p>Place new order:</p>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
@@ -263,18 +267,18 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-0 small">The final amount could change depending on current market conditions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5 class="card-title mb-0">Sell Orders</h5>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -295,17 +299,17 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5 class="card-title mb-0">Buy Orders</h5>
|
||||
<div class="card-actions">
|
||||
<CardActions>
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardActions>
|
||||
</CardHeader>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -326,7 +330,7 @@ const operationCurrencies = currencies.slice(0, 20);
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
---
|
||||
// Port of preview/pages/datagrid.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Datagrid from '@shared/components/parts/Datagrid.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Data grid" pageHeader="Data grid" pageMenu="base.datagrid">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Base info</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Base info" />
|
||||
<CardBody>
|
||||
<Datagrid />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</DefaultLayout>
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
// Port of preview/pages/datatables.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import { liquidUnixSeconds, liquidLongDate } from '@shared/lib/liquid-date';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import TablerList from '@shared/components/js/TablerList.astro';
|
||||
import rollercoasters from '@data/rollercoasters.json';
|
||||
@@ -42,8 +43,8 @@ const parameters =
|
||||
---
|
||||
|
||||
<DefaultLayout title="Datatables" pageHeader="Datatables" pageMenu="plugins.datatables" pageLibs={['lists']}>
|
||||
<div class="card">
|
||||
<div class="card-body p-0">
|
||||
<Card>
|
||||
<CardBody class="p-0">
|
||||
<div id={`table-${id}`} class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
@@ -77,8 +78,8 @@ const parameters =
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<TablerList id={id} parameters={parameters} />
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/dropdowns.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import DropdownMenu from '@shared/components/ui/DropdownMenu.astro';
|
||||
import DropdownMenuAll from '@shared/components/ui/DropdownMenuAll.astro';
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/dropzone.html (layout: default).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Dropzone from '@shared/components/ui/Dropzone.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
@@ -12,33 +14,33 @@ import Dropzone from '@shared/components/ui/Dropzone.astro';
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic Usage</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Basic Usage</CardTitle>
|
||||
<Dropzone id="default" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Multiple File Upload</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Multiple File Upload</CardTitle>
|
||||
<Dropzone id="multiple" multiple={true} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Custom Dropzone</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Custom Dropzone</CardTitle>
|
||||
<Dropzone
|
||||
id="custom"
|
||||
custom={true}
|
||||
text="Your text here"
|
||||
description="Your custom description here"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,8 +1,12 @@
|
||||
---
|
||||
// Port of preview/pages/email-inbox.html.
|
||||
|
||||
import Subheader from '@shared/components/ui/Subheader.astro';
|
||||
import ButtonGroup from '@shared/components/ui/ButtonGroup.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import Offcanvas from '@shared/components/ui/Offcanvas.astro';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import Modal from '@shared/components/modals/Modal.astro';
|
||||
import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro';
|
||||
@@ -15,10 +19,10 @@ import mails from '@data/mails.json';
|
||||
pageMenu="extra.email-inbox"
|
||||
pageLibs={['hugerte']}
|
||||
>
|
||||
<div class="card">
|
||||
<Card>
|
||||
<div class="row g-0">
|
||||
<div class="col-xxl-3 email-border border-end">
|
||||
<div class="offcanvas-xxl offcanvas-start h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
|
||||
<Offcanvas size="xxl" direction="start" class="h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
|
||||
<div class="card-body h-100">
|
||||
<div>
|
||||
<Button icon="pencil" text="Compose" color="primary" class="d-none d-sm-block" modalId="new-email" />
|
||||
@@ -39,7 +43,7 @@ import mails from '@data/mails.json';
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h6 class="subheader">Labels</h6>
|
||||
<Subheader as="h6">Labels</Subheader>
|
||||
<div class="mt-2 nav nav-vertical">
|
||||
<a href="#" class="nav-link">
|
||||
<div class="badge bg-info me-2"></div> Updates
|
||||
@@ -63,7 +67,7 @@ import mails from '@data/mails.json';
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<h6 class="subheader">Storage</h6>
|
||||
<Subheader as="h6">Storage</Subheader>
|
||||
<Progress value={46} class="my-2" />
|
||||
|
||||
<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
|
||||
@@ -71,7 +75,7 @@ import mails from '@data/mails.json';
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Offcanvas>
|
||||
</div>
|
||||
|
||||
<div class="col-xxl-9">
|
||||
@@ -84,13 +88,13 @@ import mails from '@data/mails.json';
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<ButtonGroup>
|
||||
<Button icon="archive" iconOnly />
|
||||
<Button icon="alert-octagon" iconOnly />
|
||||
<Button icon="trash" iconOnly />
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
|
||||
<div class="btn-group">
|
||||
<ButtonGroup>
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<Icon name="folder" />
|
||||
</button>
|
||||
@@ -101,9 +105,9 @@ import mails from '@data/mails.json';
|
||||
<a class="dropdown-item" href="#">Updates</a>
|
||||
<a class="dropdown-item" href="#">Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
|
||||
<div class="btn-group">
|
||||
<ButtonGroup>
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<Icon name="tag" />
|
||||
</button>
|
||||
@@ -114,9 +118,9 @@ import mails from '@data/mails.json';
|
||||
<a class="dropdown-item" href="#">Promotions</a>
|
||||
<a class="dropdown-item" href="#">Forums</a>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
|
||||
<div class="btn-group">
|
||||
<ButtonGroup>
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<Icon name="dots" /> More
|
||||
</button>
|
||||
@@ -127,7 +131,7 @@ import mails from '@data/mails.json';
|
||||
<a class="dropdown-item" href="#">Add Star</a>
|
||||
<a class="dropdown-item" href="#">Mute</a>
|
||||
</div>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
@@ -184,16 +188,16 @@ import mails from '@data/mails.json';
|
||||
Showing 1 - {mails.length} of {mails.length}
|
||||
</div> <!-- end col-->
|
||||
<div class="col-5">
|
||||
<div class="btn-group float-end">
|
||||
<ButtonGroup class="float-end">
|
||||
<button type="button" class="btn btn-icon"><Icon name="chevron-left" /></button>
|
||||
<button type="button" class="btn btn-icon"><Icon name="chevron-right" /></button>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
</div> <!-- end col-->
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Modal modalId="new-email">
|
||||
<NewEmailModalContent />
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
---
|
||||
// Port of preview/pages/emails.html.
|
||||
// Masonry auto-inits from the data-masonry attribute (page-lib, no init script,
|
||||
// like cards-masonry.astro); fslightbox is a pure page-lib (no init script).
|
||||
// The show.bs.modal handler is captured via {% capture_script %} → addPageScript.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import CardStamp from '@shared/components/ui/CardStamp.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
import { site } from '@shared/lib/site';
|
||||
import { addPageScript } from '@shared/lib/page-scripts';
|
||||
import emails from '@data/emails.json';
|
||||
@@ -40,18 +40,14 @@ addPageScript(`<script>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card card-md">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
<Icon name="mail" />
|
||||
</div>
|
||||
</div>
|
||||
<CardStamp size="lg" icon="mail" color="primary" />
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Emails</h3>
|
||||
<div class="prose text-secondary fs-3">
|
||||
<Prose class="text-secondary fs-3">
|
||||
{emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
|
||||
</div>
|
||||
</Prose>
|
||||
<div class="mt-3">
|
||||
<a href={site.emails.buy_link} class="btn btn-primary" target="_blank">Buy all emails for {site.emails.price}</a>
|
||||
</div>
|
||||
@@ -93,10 +89,10 @@ addPageScript(`<script>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="p-7">
|
||||
<div class="prose">
|
||||
<Prose>
|
||||
<h3 data-email-title></h3>
|
||||
<p data-email-description></p>
|
||||
</div>
|
||||
</Prose>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href={site.emails.buy_link} class="btn btn-primary w-100" target="_blank">Buy {site.emails.count} emails for {site.emails.price}</a>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/empty.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
// Port of preview/pages/faq.html.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import faq from '@data/faq.json';
|
||||
|
||||
const categories = faq as { name: string; questions: { question: string }[] }[];
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
// Port of preview/pages/flags.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import flags from '@data/flags.json';
|
||||
|
||||
// Liquid: {% for icon in (0..20) %}<div></div>{% endfor %} — 21 filler divs
|
||||
@@ -8,11 +10,11 @@ const fillers = Array.from({ length: 21 });
|
||||
---
|
||||
|
||||
<DefaultLayout title="Flags" pageHeader="Flags" pageMenu="addons.flags">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div class="card-title">List of all flags</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
</CardHeader>
|
||||
<CardBody class="p-0">
|
||||
<div class="demo-icons-list-wrap">
|
||||
<div class="demo-icons-list">
|
||||
{
|
||||
@@ -30,6 +32,6 @@ const fillers = Array.from({ length: 21 });
|
||||
{fillers.map(() => <div></div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/forgot-password.html (layout: single)
|
||||
import SingleLayout from '@shared/layouts/SingleLayout.astro';
|
||||
import ForgotPasswordCard from '@shared/components/cards/ForgotPasswordCard.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
// Port of preview/pages/form-elements.html
|
||||
|
||||
import CardSubtitle from '@shared/components/ui/CardSubtitle.astro';
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import FormElements1 from '@shared/components/forms/FormElements1.astro';
|
||||
import FormElements2 from '@shared/components/forms/FormElements2.astro';
|
||||
@@ -10,8 +11,14 @@ import FormElements6 from '@shared/components/forms/FormElements6.astro';
|
||||
import Layout from '@shared/components/cards/form/Layout.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import InputMask from '@shared/components/ui/form/InputMask.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardFooter from '@shared/components/ui/CardFooter.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import FormGroup from '@shared/components/ui/FormGroup.astro';
|
||||
import people from '@data/people.json';
|
||||
|
||||
const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH'];
|
||||
@@ -42,11 +49,11 @@ const rows = [
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<form action="https://httpbin.org/post" method="post" class="card">
|
||||
<div class="card-header">
|
||||
<Card as="form" action="https://httpbin.org/post" method="post">
|
||||
<CardHeader>
|
||||
<h4 class="card-title">Form elements</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<div class="row g-5">
|
||||
<div class="col-xl-4">
|
||||
<div class="row">
|
||||
@@ -67,46 +74,46 @@ const rows = [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
</CardBody>
|
||||
<CardFooter class="text-end">
|
||||
<div class="d-flex">
|
||||
<a href="#" class="btn btn-link">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary ms-auto">Send data</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Project ID</h3>
|
||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||
<Card class="h-100">
|
||||
<CardBody>
|
||||
<CardTitle>Project ID</CardTitle>
|
||||
<CardSubtitle>Used when interacting with the API.</CardSubtitle>
|
||||
<InputIcon icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">Learn more about <a href="#">Project ID</a></div>
|
||||
<div class="col-auto"><Button text="Save" color="primary" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Node.js Version</h3>
|
||||
<p class="card-subtitle">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Node.js Version</CardTitle>
|
||||
<CardSubtitle>
|
||||
The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.
|
||||
</p>
|
||||
</CardSubtitle>
|
||||
<select class="form-select">
|
||||
<option>14.x</option>
|
||||
<option>12.x</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-footer">Learn more about <a href="#">Node.js Version</a></div>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardFooter>Learn more about <a href="#">Node.js Version</a></CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-4"><Layout /></div>
|
||||
@@ -114,50 +121,46 @@ const rows = [
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Input mask</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3"><label class="form-label">Date</label><InputMask mask="00/00/0000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Hour</label><InputMask mask="00:00:00" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Date & Hour</label><InputMask mask="00/00/0000 00:00:00" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">ZIP Code</label><InputMask mask="00000-000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Money</label><InputMask mask="000.000.000.000.000,00" visible reverse /></div>
|
||||
<div class="mb-3"><label class="form-label">Telephone</label><InputMask mask="0000-0000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">Telephone with Code Area</label><InputMask mask="(00) 0000-0000" visible /></div>
|
||||
<div class="mb-3"><label class="form-label">IP Address</label><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></div>
|
||||
</div>
|
||||
</div>
|
||||
<Card>
|
||||
<CardHeader title="Input mask" />
|
||||
<CardBody>
|
||||
<FormGroup label="Date"><InputMask mask="00/00/0000" visible /></FormGroup>
|
||||
<FormGroup label="Hour"><InputMask mask="00:00:00" visible /></FormGroup>
|
||||
<FormGroup label={'Date & Hour'}><InputMask mask="00/00/0000 00:00:00" visible /></FormGroup>
|
||||
<FormGroup label="ZIP Code"><InputMask mask="00000-000" visible /></FormGroup>
|
||||
<FormGroup label="Money"><InputMask mask="000.000.000.000.000,00" visible reverse /></FormGroup>
|
||||
<FormGroup label="Telephone"><InputMask mask="0000-0000" visible /></FormGroup>
|
||||
<FormGroup label="Telephone with Code Area"><InputMask mask="(00) 0000-0000" visible /></FormGroup>
|
||||
<FormGroup label="IP Address"><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></FormGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card h-100">
|
||||
<div class="card-header"><h3 class="card-title">My Profile</h3></div>
|
||||
<div class="card-body">
|
||||
<Card as="form" class="h-100">
|
||||
<CardHeader title="My Profile" />
|
||||
<CardBody>
|
||||
<div class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-auto"><Avatar person={people[2]} size="md" /></div>
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
<FormGroup label="Email-Address">
|
||||
<input class="form-control" placeholder="your-email@domain.com" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Bio</label>
|
||||
<FormGroup label="Bio">
|
||||
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email-Address</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Email-Address">
|
||||
<input class="form-control" placeholder="your-email@domain.com" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Password">
|
||||
<input type="password" class="form-control" value="password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end"><Button text="Save" color="primary" /></div>
|
||||
</form>
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
<CardFooter class="text-end"><Button text="Save" color="primary" /></CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,48 +168,45 @@ const rows = [
|
||||
<div class="col-lg-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
<Card as="form">
|
||||
<CardBody>
|
||||
<CardTitle>Edit Profile</CardTitle>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-5"><div class="mb-3"><label class="form-label">Company</label><input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc." /></div></div>
|
||||
<div class="col-sm-6 col-md-3"><div class="mb-3"><label class="form-label">Username</label><input type="text" class="form-control" placeholder="Username" value="michael23" /></div></div>
|
||||
<div class="col-sm-6 col-md-4"><div class="mb-3"><label class="form-label">Email address</label><input type="email" class="form-control" placeholder="Email" /></div></div>
|
||||
<div class="col-sm-6 col-md-6"><div class="mb-3"><label class="form-label">First Name</label><input type="text" class="form-control" placeholder="Company" value="Chet" /></div></div>
|
||||
<div class="col-sm-6 col-md-6"><div class="mb-3"><label class="form-label">Last Name</label><input type="text" class="form-control" placeholder="Last Name" value="Faker" /></div></div>
|
||||
<div class="col-md-12"><div class="mb-3"><label class="form-label">Address</label><input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia" /></div></div>
|
||||
<div class="col-sm-6 col-md-4"><div class="mb-3"><label class="form-label">City</label><input type="text" class="form-control" placeholder="City" value="Melbourne" /></div></div>
|
||||
<div class="col-sm-6 col-md-3"><div class="mb-3"><label class="form-label">Postal Code</label><input type="test" class="form-control" placeholder="ZIP Code" /></div></div>
|
||||
<div class="col-md-5"><div class="mb-3"><label class="form-label">Country</label><select class="form-control form-select"><option value="">Germany</option></select></div></div>
|
||||
<div class="col-md-5"><FormGroup label="Company"><input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc." /></FormGroup></div>
|
||||
<div class="col-sm-6 col-md-3"><FormGroup label="Username"><input type="text" class="form-control" placeholder="Username" value="michael23" /></FormGroup></div>
|
||||
<div class="col-sm-6 col-md-4"><FormGroup label="Email address"><input type="email" class="form-control" placeholder="Email" /></FormGroup></div>
|
||||
<div class="col-sm-6 col-md-6"><FormGroup label="First Name"><input type="text" class="form-control" placeholder="Company" value="Chet" /></FormGroup></div>
|
||||
<div class="col-sm-6 col-md-6"><FormGroup label="Last Name"><input type="text" class="form-control" placeholder="Last Name" value="Faker" /></FormGroup></div>
|
||||
<div class="col-md-12"><FormGroup label="Address"><input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia" /></FormGroup></div>
|
||||
<div class="col-sm-6 col-md-4"><FormGroup label="City"><input type="text" class="form-control" placeholder="City" value="Melbourne" /></FormGroup></div>
|
||||
<div class="col-sm-6 col-md-3"><FormGroup label="Postal Code"><input type="test" class="form-control" placeholder="ZIP Code" /></FormGroup></div>
|
||||
<div class="col-md-5"><FormGroup label="Country"><select class="form-control form-select"><option value="">Germany</option></select></FormGroup></div>
|
||||
<div class="col-md-12">
|
||||
<div class="mb-3 mb-0">
|
||||
<label class="form-label">About Me</label>
|
||||
<FormGroup label="About Me" class="mb-3 mb-0">
|
||||
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
|
||||
You doubt I'll bother, reading into it
|
||||
I'll probably won't, left to my own devices
|
||||
But that's the difference in our opinions.</textarea>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Update Profile</button></div>
|
||||
</form>
|
||||
</CardBody>
|
||||
<CardFooter class="text-end"><button type="submit" class="btn btn-primary">Update Profile</button></CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header"><h3 class="card-title">HTTP Request</h3></div>
|
||||
<div class="card-body">
|
||||
<Card class="h-100">
|
||||
<CardHeader title="HTTP Request" />
|
||||
<CardBody>
|
||||
<div class="row row-cards">
|
||||
<div class="mb-3 col-sm-4 col-md-2">
|
||||
<label class="form-label required">Method</label>
|
||||
<FormGroup label="Method" required class="mb-3 col-sm-4 col-md-2">
|
||||
<select class="form-select">
|
||||
{httpMethods.map((m) => <option value={m}>{m}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 col-sm-8 col-md-10">
|
||||
<label class="form-label required">URL</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="URL" required class="mb-3 col-sm-8 col-md-10">
|
||||
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="form-label">Assertions</div>
|
||||
<div class="table-responsive">
|
||||
@@ -236,9 +236,9 @@ But that's the difference in our opinions.</textarea>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Make request</button></div>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardFooter class="text-end"><button type="submit" class="btn btn-primary">Make request</button></CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
---
|
||||
// Port of preview/pages/form-layout.html
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Datepicker from '@shared/components/ui/Datepicker.astro';
|
||||
import FormGroup from '@shared/components/ui/FormGroup.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Layout from '@shared/components/cards/form/Layout.astro';
|
||||
import Payment from '@shared/components/cards/form/Payment.astro';
|
||||
import flags from '@data/flags.json';
|
||||
@@ -18,66 +21,57 @@ const countries = flags as { name: string }[];
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Basic Form</h3></div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Basic Form" />
|
||||
<CardBody>
|
||||
<form class="space-y">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label visually-hidden" for="basic-name">Name</label>
|
||||
<FormGroup label="Name" labelClass="visually-hidden" for="basic-name" class="col-6">
|
||||
<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label visually-hidden" for="basic-email">Email address</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Email address" labelClass="visually-hidden" for="basic-email" class="col-6">
|
||||
<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label visually-hidden" for="basic-password">Password</label>
|
||||
<FormGroup label="Password" labelClass="visually-hidden" for="basic-password" class="">
|
||||
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Confirm Password" labelClass="visually-hidden" for="basic-password-confirm" class="">
|
||||
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div><Button color="primary" block text="Submit" /></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Example Form</h3></div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Example Form" />
|
||||
<CardBody>
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<label class="form-label" for="example-first-name">First Name</label>
|
||||
<FormGroup label="First Name" for="example-first-name" class="">
|
||||
<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-last-name">Last Name</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Last Name" for="example-last-name" class="">
|
||||
<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-email">Email</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Email" for="example-email" class="">
|
||||
<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-subject">Select Subject</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Select Subject" for="example-subject" class="">
|
||||
<select class="form-select" id="example-subject" name="subject">
|
||||
<option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label" for="example-message">Message</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Message" for="example-message" class="">
|
||||
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div><Button color="primary" block text="Send Message" iconEnd="arrow-right" /></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,9 +79,9 @@ const countries = flags as { name: string }[];
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Example Form with Icons</h3></div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Example Form with Icons" />
|
||||
<CardBody>
|
||||
<form class="space-y">
|
||||
<div><InputIcon icon="user" placeholder="Username" prepend /></div>
|
||||
<div><InputIcon icon="mail" placeholder="Email address" prepend type="mail" /></div>
|
||||
@@ -100,14 +94,14 @@ const countries = flags as { name: string }[];
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Form with Icons and Validation</h3></div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Form with Icons and Validation" />
|
||||
<CardBody>
|
||||
<form class="space-y">
|
||||
<div>
|
||||
<div class="input-icon">
|
||||
@@ -124,68 +118,60 @@ const countries = flags as { name: string }[];
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="col-12"><Layout horizontal title="Horizontal form" /></div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header"><h3 class="card-title">Example Form</h3></div>
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardHeader title="Example Form" />
|
||||
<CardBody>
|
||||
<form>
|
||||
<div class="space-y">
|
||||
<div><h4>Personal Info</h4></div>
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div>
|
||||
<label class="form-label">First Name</label>
|
||||
<FormGroup label="First Name" class="">
|
||||
<input type="text" placeholder="Enter first name" class="form-control" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Last Name</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Last Name" class="">
|
||||
<input type="text" placeholder="Enter last name" class="form-control" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Gender</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Gender" class="">
|
||||
<div><select class="form-select"><option>Male</option><option>Female</option><option>Others</option></select></div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Date of Birth</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Date of Birth" class="">
|
||||
<div><Datepicker layout="icon" id="birth-date" /></div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Category</label>
|
||||
<FormGroup label="Category" class="">
|
||||
<div><select class="form-select"><option>Category 1</option><option>Category 2</option><option>Category 3</option></select></div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div><h4>Address</h4></div>
|
||||
<div>
|
||||
<label class="form-label">Street</label>
|
||||
<FormGroup label="Street" class="">
|
||||
<input type="text" class="form-control" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div class="row row-cols-2 g-4">
|
||||
<div><label class="form-label">City</label><input type="text" class="form-control" /></div>
|
||||
<div><label class="form-label">State</label><input type="text" class="form-control" /></div>
|
||||
<div><label class="form-label">Post Code</label><input type="text" class="form-control" /></div>
|
||||
<div>
|
||||
<label class="form-label">Country</label>
|
||||
<FormGroup label="City" class=""><input type="text" class="form-control" /></FormGroup>
|
||||
<FormGroup label="State" class=""><input type="text" class="form-control" /></FormGroup>
|
||||
<FormGroup label="Post Code" class=""><input type="text" class="form-control" /></FormGroup>
|
||||
<FormGroup label="Country" class="">
|
||||
<div>
|
||||
<select class="form-select">
|
||||
<option>--Select Country--</option>
|
||||
{countries.map((country) => <option>{country.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<label class="form-label">Membership</label>
|
||||
<FormGroup label="Membership" class="">
|
||||
<div class="d-flex flex-row gap-4">
|
||||
<Check title="Free" type="radio" name="membership" checked />
|
||||
<Check title="Paid" type="radio" name="membership" />
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<Button text="Cancel" />
|
||||
@@ -193,8 +179,8 @@ const countries = flags as { name: string }[];
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
// Port of preview/pages/fullcalendar.html (layout: default).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Fullcalendar from '@shared/components/ui/Fullcalendar.astro';
|
||||
---
|
||||
|
||||
@@ -10,9 +11,9 @@ import Fullcalendar from '@shared/components/ui/Fullcalendar.astro';
|
||||
pageMenu="plugins.fullcalendar"
|
||||
pageLibs={['fullcalendar']}
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Fullcalendar sampleEvents />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/gallery.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/icons.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import IconsBanner from '@shared/components/cards/IconsBanner.astro';
|
||||
import Icons from '@shared/components/cards/Icons.astro';
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
---
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import CardStamp from '@shared/components/ui/CardStamp.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
import freeIllustrations from '@data/free-illustrations.json';
|
||||
import illustrationsList from '@data/illustrations.json';
|
||||
import siteData from '@data/site.json';
|
||||
@@ -89,17 +93,17 @@ ${illustrationsJs}
|
||||
<div class="col-12">
|
||||
<div class="row row-cards row-deck g-4">
|
||||
<div class="col-md-7">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex align-items-center">
|
||||
<Card>
|
||||
<CardBody class="d-flex align-items-center">
|
||||
<div id="current-illustration" set:html={withClass(firstIllustration)} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div>
|
||||
<div class="form-label">Primary color</div>
|
||||
<div class="row g-2">
|
||||
@@ -155,8 +159,8 @@ ${illustrationsJs}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,19 +175,15 @@ ${illustrationsJs}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-md sticky-top">
|
||||
<div class="card-stamp card-stamp-lg">
|
||||
<div class="card-stamp-icon bg-primary">
|
||||
<Icon name="brand-figma" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Card size="md" class="sticky-top">
|
||||
<CardStamp size="lg" icon="brand-figma" color="primary" />
|
||||
<CardBody>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Illustrations</h3>
|
||||
<div class="prose text-secondary">
|
||||
<Prose class="text-secondary">
|
||||
Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
|
||||
</div>
|
||||
</Prose>
|
||||
<div class="mt-3">
|
||||
<a href={buyLink} class="btn btn-primary" target="_blank" rel="noopener">
|
||||
<Icon name="download" />
|
||||
@@ -192,22 +192,22 @@ ${illustrationsJs}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
{
|
||||
illustrationsList.map((illustration) => (
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<a href={buyLink} target="_blank">
|
||||
<img src={`./static/illustrations/light/${illustration}.png`} alt={illustration} class="img-light" />
|
||||
<img src={`./static/illustrations/dark/${illustration}.png`} alt={illustration} class="img-dark" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port preview/pages/index.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/inline-player.html (layout: default).
|
||||
// Liquid: {% for provider in inline-players %} → one card per provider.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import InlinePlayer from '@shared/components/ui/InlinePlayer.astro';
|
||||
import players from '@data/inline-players.json';
|
||||
|
||||
@@ -18,13 +20,13 @@ type Provider = { title: string; type: string; id: string; 'embed-id': string |
|
||||
{
|
||||
(players as Provider[]).map((provider) => (
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">{provider.title}</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>{provider.title}</CardTitle>
|
||||
|
||||
<InlinePlayer id={provider.id} type={provider.type} embedId={provider['embed-id']} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/invoice.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import InvoiceCard from '@shared/components/cards/InvoiceCard.astro';
|
||||
---
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
// Port of preview/pages/job-listing.html (layout: default)
|
||||
// NOTE: page-header-actions "add-job" requires PageHeader.astro to dispatch it
|
||||
// to HeaderActionsAddJob — see the migration report (PageHeader.astro is a
|
||||
// shared component and was not modified here).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import jobsData from '@data/jobs.json';
|
||||
|
||||
@@ -90,11 +91,11 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K', 'Drawing / Painting'
|
||||
<div class="space-y">
|
||||
{
|
||||
jobs.map((job) => (
|
||||
<div class="card">
|
||||
<Card>
|
||||
<div class="row g-0">
|
||||
<div class="col-auto">
|
||||
<div class="card-body">
|
||||
<div class="avatar avatar-md" style={`background-image: url(./static/jobs/${job.image})`} />
|
||||
<Avatar src={`static/jobs/${job.image}`} size="md" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
@@ -143,7 +144,7 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K', 'Drawing / Painting'
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-boxed.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-combo.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-condensed.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-fluid-vertical.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-fluid.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-horizontal.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-navbar-dark.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-navbar-overlap.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-navbar-sticky.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-rtl.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-vertical-right.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/layout-vertical-transparent.html (layout: homepage)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import HomepageContent from '@shared/components/HomepageContent.astro';
|
||||
---
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port preview/pages/layout-vertical.html:
|
||||
// layout-sidebar: true, layout-sidebar-dark: true, layout-hide-topbar: true,
|
||||
// layout: homepage (page-header overridden by the page front matter)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
|
||||
+17
-14
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/license.html (layout: default)
|
||||
// The prose is shared/includes/license.md rendered via `renderContent: "md"`
|
||||
// (markdown-it). The rendered HTML is inlined verbatim from the reference build
|
||||
// to guarantee a 1:1 DOM match — Astro's markdown pipeline (remark + smartypants)
|
||||
@@ -7,7 +6,11 @@
|
||||
// TODO: source of truth remains shared/includes/license.md; regenerate this
|
||||
// block if the markdown changes.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardFooter from '@shared/components/ui/CardFooter.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
|
||||
const licenseHtml = `
|
||||
<p>This is a legal agreement between you, the Purchaser, and Tabler. Purchasing or downloading of any Tabler product (Tabler Free, Tabler PRO, Tabler Email), constitutes your acceptance of the terms of this license, <a href="https://tabler.io/terms-of-service.html">Tabler terms of service</a> and <a href="https://tabler.io/privacy-policy.html">Tabler private policy</a>.</p>
|
||||
@@ -40,17 +43,17 @@ const licenseHtml = `
|
||||
<DefaultLayout title="License" pageHeader="Tabler License" pageMenu="extra.license">
|
||||
<div class="row row-cards">
|
||||
<div class="col-lg-8">
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<div class="prose">
|
||||
<Card size="lg">
|
||||
<CardBody>
|
||||
<Prose>
|
||||
<Fragment set:html={licenseHtml} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Prose>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="me-3">
|
||||
<Icon name="scale" size="md" />
|
||||
@@ -88,12 +91,12 @@ const licenseHtml = `
|
||||
<ul class="list-unstyled space-y-1">
|
||||
<li><Icon name="info-circle" class="text-blue" /> License and copyright notice</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
This is not legal advice.
|
||||
<a href="#" target="_blank">Learn more about repository licenses.</a>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/lightbox.html (layout: default).
|
||||
// Liquid: photos | where: "horizontal", true — the gallery iterates the filtered
|
||||
// list for both the fslightbox href and the Photo include.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
|
||||
+15
-14
@@ -1,9 +1,12 @@
|
||||
---
|
||||
// Port of preview/pages/lists.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardHeader from '@shared/components/ui/CardHeader.astro';
|
||||
import UsersList from '@shared/components/cards/UsersList.astro';
|
||||
import UsersList2 from '@shared/components/cards/UsersList2.astro';
|
||||
import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro';
|
||||
import ListGroup from '@shared/components/ui/ListGroup.astro';
|
||||
import ListGroupItem from '@shared/components/ui/ListGroupItem.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Lists" pageHeader="Lists" pageMenu="base.lists">
|
||||
@@ -17,20 +20,18 @@ import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro';
|
||||
<UsersList offset={8} checkbox hover checkedIds="2,5,8" title="Contacts" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Links and buttons</h3>
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
<Card>
|
||||
<CardHeader title="Links and buttons" />
|
||||
<ListGroup flush>
|
||||
<ListGroupItem as="a" href="#" action active aria-current="true">
|
||||
The current link item
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
|
||||
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
|
||||
</div>
|
||||
</div>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem as="a" href="#" action>A second link item</ListGroupItem>
|
||||
<ListGroupItem as="a" href="#" action>A third link item</ListGroupItem>
|
||||
<ListGroupItem as="a" href="#" action>A fourth link item</ListGroupItem>
|
||||
<ListGroupItem as="a" action disabled>A disabled link item</ListGroupItem>
|
||||
</ListGroup>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+15
-13
@@ -1,15 +1,17 @@
|
||||
---
|
||||
// Port of preview/pages/logs.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardFooter from '@shared/components/ui/CardFooter.astro';
|
||||
import { site } from '@shared/lib/site';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Logs" pageHeader="Logs" pageMenu="extra.logs">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<h4>
|
||||
Checked URL
|
||||
</h4>
|
||||
@@ -26,16 +28,16 @@ import { site } from '@shared/lib/site';
|
||||
<div>
|
||||
<pre>HTTP/1.1 200 Connection established</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<h4>Escalation</h4>
|
||||
<div>Entire team</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<h4>
|
||||
Application Log
|
||||
</h4>
|
||||
@@ -58,12 +60,12 @@ import { site } from '@shared/lib/site';
|
||||
<Badge text="DEBUG" color="disabled" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<h4>Log Source</h4>
|
||||
<div>Application Server (prod-01)</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/map-fullsize.html.
|
||||
// Front matter: layout-wrapper-full + layout-sidebar + layout-hide-topbar,
|
||||
// page-libs: [google-maps], page-menu: plugins.map-fullsize. No title / no
|
||||
// page-header (the page-header block renders empty in the reference).
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/maps-vector.html (layout: default).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import MapVector from '@shared/components/ui/MapVector.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
@@ -12,28 +14,28 @@ import MapVector from '@shared/components/ui/MapVector.astro';
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">World map</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>World map</CardTitle>
|
||||
<MapVector mapId="world-merc" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Map with markers</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Map with markers</CardTitle>
|
||||
<MapVector mapId="world-markers" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Map with markers and lines</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Map with markers and lines</CardTitle>
|
||||
<MapVector mapId="world-lines" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,9 +1,10 @@
|
||||
---
|
||||
// Port of preview/pages/maps.html (layout: default).
|
||||
// Liquid: {% for map in maps %} — card maps span a full-width column with no
|
||||
// card-body; non-card maps get a card-body with a title.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Map from '@shared/components/ui/Map.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import maps from '@data/maps.json';
|
||||
|
||||
type MapData = { title?: string; card?: boolean };
|
||||
@@ -16,18 +17,18 @@ const mapEntries = Object.entries(maps as Record<string, MapData>);
|
||||
mapEntries.map(([mapId, data]) =>
|
||||
data.card ? (
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<Card>
|
||||
<Map mapId={mapId} ratio="21x9" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="card-title">{data.title}</div>
|
||||
<Map mapId={mapId} />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
)
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/about.html (title: About).
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
---
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/hero.html (title: Hero, page-libs: [typed.js]).
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
import Side from '@shared/components/marketing/hero/Side.astro';
|
||||
import Companies from '@shared/components/marketing/sections/Companies.astro';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/index.html (permalink marketing/index.html).
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
import Browser from '@shared/components/marketing/hero/Browser.astro';
|
||||
import Companies from '@shared/components/marketing/sections/Companies.astro';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/pricing.html (title: Pricing).
|
||||
// The `description` front matter is not emitted by the base layout (no
|
||||
// page-specific <meta name="description"> in the reference build) — no prop.
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/real-estate.html (no title front matter).
|
||||
// Uses the `real-estate` global data (imported from @data/real-estate.json).
|
||||
// Asset base is "../" (page|relative for the one-level-deep marketing pages).
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
import SectionDivider from '@shared/components/marketing/SectionDivider.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import realEstate from '@data/real-estate.json';
|
||||
|
||||
interface Building {
|
||||
@@ -46,12 +47,12 @@ const buildings = realEstate as Building[];
|
||||
{
|
||||
buildings.map((building) => (
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<Card>
|
||||
<a href="#">
|
||||
<div class="img-bg ratio ratio-4x3 card-img-top" style={`background-image: url(../static/marketing/${building.image})`}></div>
|
||||
</a>
|
||||
|
||||
<div class="card-body">
|
||||
<CardBody>
|
||||
<div class="h1 mb-2 fw-bold">{building.price}</div>
|
||||
<div>
|
||||
<div class="text-secondary">{building.address}, California USA</div>
|
||||
@@ -69,8 +70,8 @@ const buildings = realEstate as Building[];
|
||||
|
||||
<a href="#" class="btn btn-primary py-2 px-3">See details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/testimonials.html (title: Testimonials).
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
import Testimonials from '@shared/components/marketing/sections/Testimonials.astro';
|
||||
---
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
// Port of preview/pages/marketing/text.html (title: Text).
|
||||
import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
---
|
||||
|
||||
<MarketingLayout title="Text">
|
||||
@@ -13,7 +13,7 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
|
||||
<section class="section pt-0">
|
||||
<div class="container container-narrow">
|
||||
<div class="prose">
|
||||
<Prose>
|
||||
<p>Why? Be quiet! <strong> We shall say 'Ni' again to you, if you do not appease us.</strong> <em> The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur.</em> That is why I am your king.</p>
|
||||
<h2>Oh, ow!</h2>
|
||||
<p>Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! It's only a model. Well, what do you want? And this isn't my nose. This is a false one. We found them.</p>
|
||||
@@ -38,7 +38,7 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro';
|
||||
<p>Why do you think that she is a witch? Well, we did do the nose. Where'd you get the coconuts? He hasn't got shit all over him.</p>
|
||||
<p>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Where'd you get the coconuts?</p>
|
||||
<p>A newt? The nose? Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! I'm not a witch. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!</p>
|
||||
</div>
|
||||
</Prose>
|
||||
</div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
// Port of preview/pages/modals.html.
|
||||
// Every modal is rendered inline (`{% include "ui/modal.html" ... inline show %}`)
|
||||
// via ModalInline (renders in place, unlike Modal.astro which drains to <body>).
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import ModalInline from '@shared/components/modals/ModalInline.astro';
|
||||
import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro';
|
||||
import LargeModalContent from '@shared/components/modals/LargeModalContent.astro';
|
||||
@@ -33,8 +34,8 @@ const addTaskClass = 'position-relative rounded d-block show bg-surface-backdrop
|
||||
pageMenu="base.modals"
|
||||
pageLibs={['signature_pad', 'hugerte', 'litepicker']}
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<div class="row g-5">
|
||||
<div class="d-none d-md-block col-3">
|
||||
<div class="nav nav-vertical sticky-top pt-4">
|
||||
@@ -163,6 +164,6 @@ const addTaskClass = 'position-relative rounded d-block show bg-surface-backdrop
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</DefaultLayout>
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/music.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import TracksList from '@shared/components/cards/music/TracksList.astro';
|
||||
import TrackInfo from '@shared/components/cards/music/TrackInfo.astro';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
// Port of preview/pages/navigation.html — seven layout/navbar.html includes
|
||||
// with variant params, rendered with the shared Navbar component.
|
||||
//
|
||||
// Note: fluid-search (variant 5) is a no-op — the search block in the Liquid
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
---
|
||||
// Port of preview/pages/offcanvas.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import Offcanvas from '@shared/components/ui/Offcanvas.astro';
|
||||
import OffcanvasHeader from '@shared/components/ui/OffcanvasHeader.astro';
|
||||
import OffcanvasBody from '@shared/components/ui/OffcanvasBody.astro';
|
||||
|
||||
const directions = ['start', 'end', 'top', 'bottom'];
|
||||
|
||||
@@ -9,8 +13,8 @@ const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
|
||||
---
|
||||
|
||||
<DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
{
|
||||
directions.map((direction) => (
|
||||
<a
|
||||
@@ -24,24 +28,21 @@ const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{
|
||||
directions.map((direction) => (
|
||||
<div
|
||||
class={`offcanvas offcanvas-${direction}`}
|
||||
<Offcanvas
|
||||
direction={direction}
|
||||
tabindex="-1"
|
||||
id={`offcanvas${capitalize(direction)}`}
|
||||
aria-labelledby={`offcanvas${capitalize(direction)}Label`}
|
||||
>
|
||||
<div class="offcanvas-header">
|
||||
<h2 class="offcanvas-title" id={`offcanvas${capitalize(direction)}Label`}>
|
||||
{capitalize(direction)} offcanvas
|
||||
</h2>
|
||||
<OffcanvasHeader title={`${capitalize(direction)} offcanvas`} titleId={`offcanvas${capitalize(direction)}Label`}>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
</OffcanvasHeader>
|
||||
<OffcanvasBody>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat
|
||||
illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde.
|
||||
@@ -52,8 +53,8 @@ const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
|
||||
Close offcanvas
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</OffcanvasBody>
|
||||
</Offcanvas>
|
||||
))
|
||||
}
|
||||
</DefaultLayout>
|
||||
@@ -1,12 +1,13 @@
|
||||
---
|
||||
// Port of preview/pages/onboarding.html (layout: base).
|
||||
// NOTE: the Liquid source passes `current=2` to ui/progress-steps.html, but that
|
||||
// include reads `active` (not `current`) — so the arg is a no-op and only the
|
||||
// first step is active. The reference reflects this (Step 1 = bg-primary).
|
||||
import BaseLayout from '@shared/layouts/BaseLayout.astro';
|
||||
import NavbarLogo from '@shared/components/NavbarLogo.astro';
|
||||
import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro';
|
||||
import ProgressSteps from '@shared/components/ui/ProgressSteps.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Button from '@shared/components/ui/Button.astro';
|
||||
import ButtonList from '@shared/components/ui/ButtonList.astro';
|
||||
import FormGroup from '@shared/components/ui/FormGroup.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Onboarding">
|
||||
@@ -33,16 +34,13 @@ import Button from '@shared/components/Button.astro';
|
||||
</div>
|
||||
<div class="card mt-5">
|
||||
<div class="card-body space-y-4">
|
||||
<div>
|
||||
<label class="form-label">Full name</label>
|
||||
<FormGroup label="Full name" class="">
|
||||
<input type="text" class="form-control" placeholder="Enter your full name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Company name</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Company name" class="">
|
||||
<input type="text" class="form-control" placeholder="Enter your company name" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Role</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Role" class="">
|
||||
<select class="form-select">
|
||||
<option value="">Select your role</option>
|
||||
<option value="developer">Developer</option>
|
||||
@@ -51,9 +49,8 @@ import Button from '@shared/components/Button.astro';
|
||||
<option value="founder">Founder</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Team size</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="Team size" class="">
|
||||
<div class="form-selectgroup">
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked />
|
||||
@@ -72,9 +69,8 @@ import Button from '@shared/components/Button.astro';
|
||||
<span class="form-selectgroup-label">50+ people</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">What are you planning to use this for?</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="What are you planning to use this for?" class="">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="personal" id="use-personal" checked />
|
||||
<label class="form-check-label" for="use-personal"> Personal projects </label>
|
||||
@@ -91,9 +87,8 @@ import Button from '@shared/components/Button.astro';
|
||||
<input class="form-check-input" type="radio" value="learning" id="use-learning" />
|
||||
<label class="form-check-label" for="use-learning"> Learning and experimentation </label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">How did you hear about us?</label>
|
||||
</FormGroup>
|
||||
<FormGroup label="How did you hear about us?" class="">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search" />
|
||||
<label class="form-check-label" for="ref-search"> Search engine </label>
|
||||
@@ -114,7 +109,7 @@ import Button from '@shared/components/Button.astro';
|
||||
<input class="form-check-input" type="checkbox" name="referral" value="other" id="ref-other" />
|
||||
<label class="form-check-label" for="ref-other"> Other </label>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="notifications" checked />
|
||||
@@ -124,10 +119,10 @@ import Button from '@shared/components/Button.astro';
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-list justify-content-between mt-4">
|
||||
<ButtonList class="justify-content-between mt-4">
|
||||
<Button text="Back" color="link link-secondary" />
|
||||
<Button text="Continue" color="primary" />
|
||||
</div>
|
||||
</ButtonList>
|
||||
</div>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
@@ -1,25 +1,26 @@
|
||||
---
|
||||
// Port of preview/pages/pagination.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
---
|
||||
|
||||
<DefaultLayout title="Pagination" pageHeader="Pagination" pageMenu="base.pagination">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Pagination />
|
||||
<Pagination text />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<Pagination count={0} prevDescription="Getting started" nextDescription="Breadcrumbs" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
// Port of preview/pages/patterns.html (layout: default)
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Card from '@shared/components/ui/Card.astro';
|
||||
import CardBody from '@shared/components/ui/CardBody.astro';
|
||||
import CardTitle from '@shared/components/ui/CardTitle.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
const patternColors = Object.keys(site.colors);
|
||||
@@ -28,9 +30,9 @@ const patterns = [
|
||||
<DefaultLayout title="Patterns" pageHeader="Patterns" pageMenu="base.patterns">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Pattern types</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Pattern types</CardTitle>
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{
|
||||
patterns.map((pattern) => (
|
||||
@@ -41,13 +43,13 @@ const patterns = [
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Pattern colors</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Pattern colors</CardTitle>
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{
|
||||
patternColors.map((color) => (
|
||||
@@ -58,13 +60,13 @@ const patterns = [
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Pattern sizes</h3>
|
||||
<Card>
|
||||
<CardBody>
|
||||
<CardTitle>Pattern sizes</CardTitle>
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{
|
||||
patternSizes.map((size) => (
|
||||
@@ -75,8 +77,8 @@ const patterns = [
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
Loaded 100 of 390 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user