cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

📝 docs: add checkbox to example component page

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-20 18:25:13 +07:00
parent 26260976fb
commit b255078431
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import { Button, ButtonOrLinkProps } from 'components/shared/Button';
import { PlusIcon } from 'components/shared/CustomIcon';
import React from 'react';
import { Button, ButtonOrLinkProps } from 'components/shared/Button';
import { Checkbox } from 'components/shared/Checkbox';
import { PlusIcon } from 'components/shared/CustomIcon';
const Page = () => {
return (
@ -69,6 +70,35 @@ const Page = () => {
))}
</div>
</div>
<div className="w-full h border border-gray-200 px-20 my-10" />
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Checkbox</h1>
<div className="flex gap-10 flex-wrap">
{Array.from({ length: 5 }).map((_, index) => (
<Checkbox
id={`checkbox-${index + 1}`}
key={index}
label={`Label ${index + 1}`}
disabled={index === 2 || index === 4 ? true : false}
checked={index === 4 ? true : undefined}
value={`value-${index + 1}`}
/>
))}
</div>
<div className="flex gap-10 flex-wrap">
{Array.from({ length: 2 }).map((_, index) => (
<Checkbox
id={`checkbox-description-${index + 1}`}
key={index}
label={`Label ${index + 1}`}
description={`Description of the checkbox ${index + 1}`}
value={`value-with-description-${index + 1}`}
/>
))}
</div>
</div>
</div>
</div>
);