mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
78 lines
2.5 KiB
Plaintext
78 lines
2.5 KiB
Plaintext
---
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import InputGroup from '@ui/InputGroup.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import ListGroup from '@ui/ListGroup.astro'
|
|
import ListGroupItem from '@ui/ListGroupItem.astro'
|
|
import { randomNumber } from '@shared/lib/pseudo-random'
|
|
|
|
const categories = ['Games', 'Clothing', 'Jewelery', 'Toys']
|
|
const ratings = ['5 stars', '4 stars', '3 stars', '2 and less stars']
|
|
const tags = ['business', 'evening', 'leisure', 'party']
|
|
---
|
|
|
|
<form action="./" method="get" autocomplete="off" novalidate>
|
|
<Subheader class="mb-2">Category</Subheader>
|
|
<ListGroup as="nav" transparent class="mb-3">
|
|
{
|
|
categories.map((item, i) => (
|
|
<ListGroupItem as="a" action active={i === 0} class="d-flex align-items-center" href="#">
|
|
{item}
|
|
<small class="text-secondary ms-auto">{randomNumber(i + 1, 11, 200)}</small>
|
|
</ListGroupItem>
|
|
))
|
|
}
|
|
</ListGroup>
|
|
|
|
<fieldset class="border-0 p-0 mb-3">
|
|
<Subheader as="legend" class="mb-2 float-none">Rating</Subheader>
|
|
{
|
|
ratings.map((item, i) => (
|
|
<label class="form-check">
|
|
<input type="radio" class="form-check-input" name="form-stars" value={item} checked={i === 0} />
|
|
<span class="form-check-label">{item}</span>
|
|
</label>
|
|
))
|
|
}
|
|
</fieldset>
|
|
|
|
<fieldset class="border-0 p-0 mb-3">
|
|
<Subheader as="legend" class="mb-2 float-none">Tags</Subheader>
|
|
{
|
|
tags.map((item, i) => (
|
|
<label class="form-check">
|
|
<input type="checkbox" class="form-check-input" name="form-tags[]" value={item} checked={i === 0} />
|
|
<span class="form-check-label">{item}</span>
|
|
</label>
|
|
))
|
|
}
|
|
</fieldset>
|
|
|
|
<Subheader class="mb-2">Price</Subheader>
|
|
<div class="row g-2 align-items-center mb-3">
|
|
<div class="col">
|
|
<InputGroup prepend="$" placeholder="from" value="3" />
|
|
</div>
|
|
<div class="col-auto">—</div>
|
|
<div class="col">
|
|
<InputGroup prepend="$" placeholder="to" />
|
|
</div>
|
|
</div>
|
|
|
|
<Subheader class="mb-2">Shipping</Subheader>
|
|
<div>
|
|
<select name="shipping-country" class="form-select">
|
|
<option>United Kingdom</option>
|
|
<option>USA</option>
|
|
<option>Germany</option>
|
|
<option>Poland</option>
|
|
<option>Other…</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<Button type="submit" text="Confirm changes" color="primary" block element="button" />
|
|
<Button text="Reset to defaults" color="link" block />
|
|
</div>
|
|
</form>
|