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

📝 docs: add button icon only on component example

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-19 21:16:39 +07:00
parent 7e6b74208d
commit 943d427db1
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 51 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { Button } from 'components/shared/Button';
import { Button, ButtonOrLinkProps } from 'components/shared/Button';
import { PlusIcon } from 'components/shared/CustomIcon';
import React from 'react';
const Page = () => {
@ -17,13 +18,55 @@ const Page = () => {
{/* Insert Components here */}
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Button</h1>
<div className="flex gap-10 flex-wrap">
<Button size="lg" disabled>
<div className="flex flex-col gap-10">
{['primary', 'secondary', 'tertiary', 'danger'].map(
(variant, index) => (
<div className="flex gap-5 flex-wrap" key={index}>
{['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
<Button
leftIcon={<PlusIcon />}
rightIcon={<PlusIcon />}
variant={variant as ButtonOrLinkProps['variant']}
size={
size !== 'disabled'
? (size as ButtonOrLinkProps['size'])
: 'md'
}
key={`${variant}-${size}`}
disabled={size === 'disabled'}
>
Button
</Button>
<Button size="md">Button</Button>
<Button size="sm">Button</Button>
<Button size="xs">Button</Button>
))}
</div>
),
)}
{[
'primary',
'secondary',
'tertiary',
'ghost',
'danger',
'danger-ghost',
].map((variant, index) => (
<div className="flex gap-5 flex-wrap" key={index}>
{['lg', 'md', 'sm', 'xs', 'disabled'].map((size) => (
<Button
iconOnly
variant={variant as ButtonOrLinkProps['variant']}
size={
size !== 'disabled'
? (size as ButtonOrLinkProps['size'])
: 'md'
}
key={`${variant}-${size}`}
disabled={size === 'disabled'}
>
<PlusIcon />
</Button>
))}
</div>
))}
</div>
</div>
</div>