-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #58 from SySagar/dev
Dev
- Loading branch information
Showing
27 changed files
with
553 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@groovy-box/ui': minor | ||
--- | ||
|
||
tailwind preflight scope |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
--- | ||
title: Accordion | ||
description: A vertically stacked set of interactive headings that each reveal a section of content. | ||
--- | ||
|
||
## Default | ||
|
||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; | ||
import { | ||
Accordion, | ||
AccordionContent, | ||
AccordionItem, | ||
AccordionTrigger, | ||
} from '@/app/ui'; | ||
import ComponenentWrapper from '@/app/ui/ComponenentWrapper'; | ||
|
||
<Tabs items={['Preview', 'Code']}> | ||
<Tab value='Preview'> | ||
<ComponenentWrapper> | ||
<div className="w-56"> | ||
<Accordion type="single" defaultValue="item-1" collapsible> | ||
<AccordionItem value="item-1"> | ||
<AccordionTrigger>Accordion 1</AccordionTrigger> | ||
<AccordionContent>Content 1</AccordionContent> | ||
</AccordionItem> | ||
<AccordionItem value="item-2"> | ||
<AccordionTrigger>Accordion 2</AccordionTrigger> | ||
<AccordionContent>Content 2</AccordionContent> | ||
</AccordionItem> | ||
<AccordionItem value="item-3"> | ||
<AccordionTrigger>Accordion 3</AccordionTrigger> | ||
<AccordionContent>Content 3</AccordionContent> | ||
</AccordionItem> | ||
</Accordion> | ||
</div> | ||
</ComponenentWrapper> | ||
|
||
</Tab> | ||
<Tab value='Code'> | ||
|
||
```tsx | ||
import { Accordion, | ||
AccordionContent, | ||
AccordionItem, | ||
AccordionTrigger, } from "@groovy-box/ui" | ||
|
||
export function AccordionDefault() { | ||
return ( | ||
<div className='w-56'> | ||
<Accordion type='single' defaultValue='item-1' collapsible> | ||
<AccordionItem value='item-1'> | ||
<AccordionTrigger>Accordion 1</AccordionTrigger> | ||
<AccordionContent>Content 1</AccordionContent> | ||
</AccordionItem> | ||
<AccordionItem value='item-2'> | ||
<AccordionTrigger>Accordion 2</AccordionTrigger> | ||
<AccordionContent>Content 2</AccordionContent> | ||
</AccordionItem> | ||
<AccordionItem value='item-3'> | ||
<AccordionTrigger>Accordion 3</AccordionTrigger> | ||
<AccordionContent>Content 3</AccordionContent> | ||
</AccordionItem> | ||
</Accordion> | ||
</div> | ||
); | ||
} | ||
|
||
``` | ||
</Tab> | ||
|
||
</Tabs> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,215 @@ | ||
--- | ||
title: Avatar | ||
description: An image/icon element with a fallback for representing the user. | ||
--- | ||
|
||
## Default | ||
|
||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; | ||
import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from '@/app/ui'; | ||
import ComponenentWrapper from '@/app/ui/ComponenentWrapper'; | ||
|
||
<Tabs items={['Preview', 'Code']}> | ||
<Tab value='Preview'> | ||
<ComponenentWrapper> | ||
<Avatar> | ||
<AvatarImage | ||
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
alt="Avatar Image" | ||
/> | ||
<AvatarFallback>SY</AvatarFallback> | ||
</Avatar> | ||
</ComponenentWrapper> | ||
|
||
</Tab> | ||
<Tab value='Code'> | ||
|
||
```tsx | ||
import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui" | ||
|
||
export function AvatarDefault() { | ||
return ( | ||
<Avatar> | ||
<AvatarContent> | ||
<img | ||
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' | ||
alt='Avatar Content Image' | ||
className='h-full w-full object-cover' | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
); | ||
} | ||
|
||
``` | ||
|
||
</Tab> | ||
|
||
</Tabs> | ||
|
||
## With icon | ||
|
||
import { Search, File } from 'lucide-react'; | ||
|
||
<Tabs items={['Preview', 'Code']}> | ||
<Tab value='Preview'> | ||
<ComponenentWrapper> | ||
<Avatar > | ||
<AvatarContent className="flex items-center justify-center"> | ||
<Search size={24} /> | ||
</AvatarContent> | ||
</Avatar> | ||
<Avatar> | ||
<AvatarContent className="bg-blue-300 flex items-center justify-center"> | ||
<File size={24} /> | ||
</AvatarContent> | ||
</Avatar> | ||
</ComponenentWrapper> | ||
|
||
</Tab> | ||
<Tab value='Code'> | ||
|
||
```tsx | ||
import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui" | ||
|
||
export function AvatarDefault() { | ||
return ( | ||
<Avatar > | ||
<AvatarContent className="flex items-center justify-center"> | ||
<Search size={24} /> | ||
</AvatarContent> | ||
</Avatar> | ||
<Avatar> | ||
<AvatarContent className="bg-blue-300 flex items-center justify-center"> | ||
<File size={24} /> | ||
</AvatarContent> | ||
</Avatar> | ||
); | ||
} | ||
|
||
``` | ||
|
||
</Tab> | ||
|
||
</Tabs> | ||
|
||
## All sizes | ||
|
||
<Tabs items={['Preview', 'Code']}> | ||
<Tab value='Preview'> | ||
<ComponenentWrapper> | ||
|
||
<Avatar size="small"> | ||
<AvatarContent className="bg-blue-500"> | ||
<img | ||
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' | ||
alt='Avatar Content Image' | ||
className='h-full w-full object-cover' | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
|
||
<Avatar size="medium"> | ||
<AvatarContent className="bg-blue-500"> | ||
<img | ||
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
alt="Avatar Content Image" | ||
className="h-full w-full object-cover" | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
|
||
<Avatar size="large"> | ||
<AvatarContent className="bg-blue-500"> | ||
<img | ||
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
alt="Avatar Content Image" | ||
className="h-full w-full object-cover" | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
|
||
</ComponenentWrapper> | ||
|
||
</Tab> | ||
<Tab value='Code'> | ||
|
||
```tsx | ||
import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui" | ||
|
||
export function AvatarDefault() { | ||
return ( | ||
<Avatar size="small"> | ||
<AvatarContent className="bg-blue-500"> | ||
<img | ||
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' | ||
alt='Avatar Content Image' | ||
className='h-full w-full object-cover' | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
|
||
<Avatar size="medium"> | ||
<AvatarContent className="bg-blue-500"> | ||
<img | ||
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
alt="Avatar Content Image" | ||
className="h-full w-full object-cover" | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
|
||
<Avatar size="large"> | ||
<AvatarContent className="bg-blue-500"> | ||
<img | ||
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" | ||
alt="Avatar Content Image" | ||
className="h-full w-full object-cover" | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
|
||
); | ||
} | ||
|
||
``` | ||
|
||
</Tab> | ||
|
||
</Tabs> | ||
|
||
## With fallback | ||
|
||
<Tabs items={['Preview', 'Code']}> | ||
<Tab value='Preview'> | ||
<ComponenentWrapper> | ||
<Avatar> | ||
<AvatarFallback>SY</AvatarFallback> | ||
</Avatar> | ||
</ComponenentWrapper> | ||
|
||
</Tab> | ||
<Tab value='Code'> | ||
|
||
```tsx | ||
import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from "@groovy-box/ui" | ||
|
||
export function AvatarDefault() { | ||
return ( | ||
<Avatar> | ||
<AvatarContent> | ||
<img | ||
src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' | ||
alt='Avatar Content Image' | ||
className='h-full w-full object-cover' | ||
/> | ||
</AvatarContent> | ||
</Avatar> | ||
); | ||
} | ||
|
||
``` | ||
|
||
</Tab> | ||
|
||
</Tabs> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
--- | ||
title: Label | ||
description: Renders an accessible label associated with controls | ||
--- | ||
|
||
## Default | ||
|
||
import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; | ||
import { Label, Switch } from '@/app/ui'; | ||
import ComponenentWrapper from '@/app/ui/ComponenentWrapper'; | ||
|
||
<Tabs items={['Preview', 'Code']}> | ||
<Tab value='Preview'> | ||
<ComponenentWrapper> | ||
<div | ||
style={{ | ||
display: 'flex', | ||
alignItems: 'center', | ||
flexDirection: 'row', | ||
justifyItems: 'center', | ||
|
||
gap: '1rem', | ||
}} | ||
> | ||
<Label | ||
className="Label text-cyan-700" | ||
htmlFor="airplane-mode" | ||
style={{ paddingRight: 15 }} | ||
> | ||
Airplane mode | ||
</Label> | ||
<Switch className="SwitchRoot" id="airplane-mode" /> | ||
</div> | ||
|
||
</ComponenentWrapper> | ||
|
||
</Tab> | ||
<Tab value='Code'> | ||
|
||
```tsx | ||
import { Label, Switch } from "@groovy-box/ui" | ||
|
||
export function LabelDefault() { | ||
return ( | ||
<div style={{ display: 'flex', alignItems: 'center' }}> | ||
<Label | ||
className='Label text-cyan-700' | ||
htmlFor='airplane-mode' | ||
style={{ paddingRight: 15 }} | ||
> | ||
Airplane mode | ||
</Label> | ||
<Switch className='SwitchRoot' id='airplane-mode' /> | ||
</div> | ||
); | ||
} | ||
|
||
``` | ||
|
||
</Tab> | ||
|
||
</Tabs> |
Oops, something went wrong.