cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

📝 docs: add switch to the example page

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-22 10:35:01 +07:00
parent ab2d87fd09
commit c865e46367
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/frontend/src/pages/components/index.tsx
View File

@ -13,10 +13,12 @@ import {
renderTabs,
renderVerticalTabs,
} from './renders/tabs';
import { Switch } from 'components/shared/Switch';
const Page = () => {
const [singleDate, setSingleDate] = useState<Value>();
const [dateRange, setDateRange] = useState<Value>();
const [switchValue, setSwitchValue] = useState(false);
return (
<div className="relative h-full min-h-full">
@ -112,6 +114,28 @@ const Page = () => {
<h1 className="text-2xl font-bold">Vertical Tabs</h1>
{renderVerticalTabs()}
</div>
<div className="w-full h border border-gray-200 px-20 my-10" />
{/* Switch */}
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Switch</h1>
<div className="flex flex-col gap-10 items-center justify-center">
<Switch
label="Label"
checked={switchValue}
onCheckedChange={setSwitchValue}
/>
<Switch
label="Label"
description="Additional information or context"
checked={switchValue}
onCheckedChange={setSwitchValue}
/>
<Switch disabled label="Disabled unchecked" />
<Switch disabled checked label="Disabled checked" />
</div>
</div>
</div>
</div>
</div>