Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dev #58

Merged
merged 2 commits into from
Sep 21, 2024
Merged

Dev #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a8c722
fix(docs,ui): tailwind preflight scope
SySagar Sep 21, 2024
59a1023
Merge pull request #57 from SySagar/docs
SySagar Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rotten-poets-kick.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@groovy-box/ui': minor
---

tailwind preflight scope
2 changes: 1 addition & 1 deletion apps/docs/app/ui/ComponenentWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function ComponenentWrapper({
children: React.ReactNode;
}) {
return (
<div className='flex flex-row items-center justify-center h-[300px] gap-20'>
<div className='ui flex flex-row items-center justify-center h-[300px] gap-20'>
{children}
</div>
);
Expand Down
71 changes: 71 additions & 0 deletions apps/docs/content/docs/(components)/accordion.mdx
View file
Open in desktop
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>
215 changes: 215 additions & 0 deletions apps/docs/content/docs/(components)/avatar.mdx
View file
Open in desktop
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>
62 changes: 62 additions & 0 deletions apps/docs/content/docs/(components)/label.mdx
View file
Open in desktop
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>
Loading
Loading