Skip to content

Commit

Permalink
Updated theme and previews
Browse files Browse the repository at this point in the history
  • Loading branch information
@SivertGullbergHansen
SivertGullbergHansen committed Jun 17, 2023
1 parent b89c1c9 commit 7c64ee9
Show file tree
Hide file tree
Showing 22 changed files with 235 additions and 177 deletions.
Binary file added dev/public/images/cat.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions dev/src/app/components/avatars/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { PageTitle } from '@/pageComponents/PageWrapper'
import React from 'react'

export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<PageTitle title='Avatars' description='Personalization'>
{children}
</PageTitle>
)
}
74 changes: 18 additions & 56 deletions dev/src/app/components/avatars/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,27 @@
import { Avatar } from '@/index'
import { PageWrapper } from '@/pageComponents/PageWrapper'
import { Section } from '@/pageComponents/Section'
import React from 'react'

export default function badges() {
return (
<PageWrapper title='Avatars' description='Used to display profile pictures'>
<div className='grid gap-9'>
<div
className='grid gap-9 place-content-center w-full'
style={{
gridTemplateColumns: 'repeat(auto-fit, 64px)',
gridAutoFlow: 'dense'
}}
>
<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Sqround</h1>
<Avatar src='/images/duck.jpeg' status='online' />
</div>
<React.Fragment>
<Section header='Rounded'>
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/cowboy.jpeg' />
<Avatar src='/images/cat.png' status='ingame' />
</Section>

<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Round</h1>
<Avatar src='/images/duck.jpeg' type='round' />
</div>
<Section header='Round'>
<Avatar src='/images/duck.jpeg' type='round' status='online' />
<Avatar src='/images/cowboy.jpeg' type='round' />
<Avatar src='/images/cat.png' type='round' status='ingame' />
</Section>

<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Square</h1>
<Avatar src='/images/duck.jpeg' status='ingame' type='square' />
</div>
</div>

<div className='flex flex-col gap-2 place-items-center w-full'>
<h1 className='font-semibold text-lg'>Army of ducks</h1>

<div
className='grid gap-4 place-content-center w-full'
style={{
gridTemplateColumns: 'repeat(6, 64px)',
gridAutoFlow: 'dense'
}}
>
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/duck.jpeg' status='away' />
<Avatar src='/images/duck.jpeg' status='ingame' />
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/duck.jpeg' status='busy' />
<Avatar src='/images/duck.jpeg' status='offline' />
<Avatar src='/images/duck.jpeg' status='away' />
<Avatar src='/images/duck.jpeg' status='busy' />
<Avatar src='/images/duck.jpeg' status='ingame' />
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/duck.jpeg' status='busy' />
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/duck.jpeg' status='away' />
<Avatar src='/images/duck.jpeg' status='ingame' />
<Avatar src='/images/duck.jpeg' status='offline' />
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/duck.jpeg' status='away' />
<Avatar src='/images/duck.jpeg' status='offline' />
</div>
</div>
</div>
</PageWrapper>
<Section header='Square'>
<Avatar src='/images/duck.jpeg' type='square' status='online' />
<Avatar src='/images/cowboy.jpeg' type='square' />
<Avatar src='/images/cat.png' type='square' status='ingame' />
</Section>
</React.Fragment>
)
}
14 changes: 14 additions & 0 deletions dev/src/app/components/badges/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { PageTitle } from '@/pageComponents/PageWrapper'
import React from 'react'

export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<PageTitle title='Badges' description='Short and sweet'>
{children}
</PageTitle>
)
}
5 changes: 2 additions & 3 deletions dev/src/app/components/badges/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import {
} from 'react-icons/bs'
import React from 'react'
import { Badge } from '@/index'
import { PageWrapper } from '@/pageComponents/PageWrapper'

export default function badges() {
return (
<PageWrapper title='Badges' description='Used to display server tags'>
<React.Fragment>
<div
className='grid gap-9 place-content-center w-full'
style={{
Expand Down Expand Up @@ -113,6 +112,6 @@ export default function badges() {
</Badge>
</div>
</div>
</PageWrapper>
</React.Fragment>
)
}
60 changes: 60 additions & 0 deletions dev/src/app/components/buttons/icons_only/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { Button } from '@/components/button/Button'
import React from 'react'
import {
BsCalendarEventFill,
BsCartFill,
BsCheckCircleFill,
BsDoorOpenFill,
BsExclamationTriangleFill,
BsFillExclamationCircleFill,
BsHandIndexFill,
BsInfoSquareFill,
BsLink,
BsXCircleFill
} from 'react-icons/bs'

export default function page() {
return (
<React.Fragment>
<Button iconOnly='btn-square'>
<BsCartFill className='w-4 h-4' />
</Button>
<Button type='btn-primary' iconOnly='btn-square'>
<BsHandIndexFill className='w-4 h-4' />
</Button>
<Button type='btn-secondary' iconOnly='btn-square'>
<BsCheckCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-accent' iconOnly='btn-square'>
<BsXCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-ghost' iconOnly='btn-square'>
<BsCalendarEventFill className='w-4 h-4' />
</Button>
<Button type='btn-outline' iconOnly='btn-square'>
<BsDoorOpenFill className='w-4 h-4' />
</Button>
<Button type='btn-active' iconOnly='btn-square'>
<BsDoorOpenFill className='w-4 h-4' />
</Button>
<Button type='btn-disabled' iconOnly='btn-square'>
<BsDoorOpenFill className='w-4 h-4' />
</Button>
<Button type='btn-error' iconOnly='btn-square'>
<BsExclamationTriangleFill className='w-4 h-4' />
</Button>
<Button type='btn-warning' iconOnly='btn-square'>
<BsFillExclamationCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-info' iconOnly='btn-square'>
<BsInfoSquareFill className='w-4 h-4' />
</Button>
<Button type='btn-success' iconOnly='btn-square'>
<BsCheckCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-link' iconOnly='btn-square'>
<BsLink className='w-4 h-4' />
</Button>
</React.Fragment>
)
}
14 changes: 14 additions & 0 deletions dev/src/app/components/buttons/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { PageTitle } from '@/pageComponents/PageWrapper'
import React from 'react'

export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<PageTitle title='Buttons' description='Clicky'>
{children}
</PageTitle>
)
}
59 changes: 6 additions & 53 deletions dev/src/app/components/buttons/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,11 @@
import {
BsCalendarEventFill,
BsCartFill,
BsCheckCircleFill,
BsDoorOpenFill,
BsExclamationTriangleFill,
BsFillExclamationCircleFill,
BsHandIndexFill,
BsInfoSquareFill,
BsLink,
BsTrashFill,
BsXCircleFill
} from 'react-icons/bs'
import { BsCartFill, BsCheckCircleFill, BsTrashFill } from 'react-icons/bs'
import React from 'react'
import { Button } from '@/index'
import { PageWrapper } from '@/pageComponents/PageWrapper'
import { Section } from '@/pageComponents/Section'

export default function buttons() {
return (
<PageWrapper title='Buttons' description='Clicky!'>
<React.Fragment>
<Section header='Normal'>
<Button>Activate</Button>
<Button type='btn-secondary'>Disable</Button>
Expand All @@ -42,48 +29,14 @@ export default function buttons() {
</Button>
</Section>

<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Icons only</h1>
<Section header='Icon only'>
<Button iconOnly='btn-square'>
<BsCartFill className='w-4 h-4' />
</Button>
<Button type='btn-primary' iconOnly='btn-square'>
<BsHandIndexFill className='w-4 h-4' />
</Button>
<Button type='btn-secondary' iconOnly='btn-square'>
<BsCheckCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-accent' iconOnly='btn-square'>
<BsXCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-ghost' iconOnly='btn-square'>
<BsCalendarEventFill className='w-4 h-4' />
</Button>
<Button type='btn-outline' iconOnly='btn-square'>
<BsDoorOpenFill className='w-4 h-4' />
</Button>
<Button type='btn-active' iconOnly='btn-square'>
<BsDoorOpenFill className='w-4 h-4' />
</Button>
<Button type='btn-disabled' iconOnly='btn-square'>
<BsDoorOpenFill className='w-4 h-4' />
</Button>
<Button type='btn-error' iconOnly='btn-square'>
<BsExclamationTriangleFill className='w-4 h-4' />
</Button>
<Button type='btn-warning' iconOnly='btn-square'>
<BsFillExclamationCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-info' iconOnly='btn-square'>
<BsInfoSquareFill className='w-4 h-4' />
</Button>
<Button type='btn-success' iconOnly='btn-square'>
<Button type='btn-outline' iconOnly='btn-circle'>
<BsCheckCircleFill className='w-4 h-4' />
</Button>
<Button type='btn-link' iconOnly='btn-square'>
<BsLink className='w-4 h-4' />
</Button>
</div>
</PageWrapper>
</Section>
</React.Fragment>
)
}
5 changes: 2 additions & 3 deletions dev/src/app/components/buttons/regular/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { Button } from '@/components/button/Button'
import { PageWrapper } from '@/pageComponents/PageWrapper'
import React from 'react'

export default function page() {
return (
<PageWrapper title='Buttons' description='Clicky'>
<React.Fragment>
<Button>Default</Button>
<Button type='btn-primary'>Primary</Button>
<Button type='btn-secondary'>Secondary</Button>
Expand All @@ -18,6 +17,6 @@ export default function page() {
<Button type='btn-info'>Info</Button>
<Button type='btn-success'>Success</Button>
<Button type='btn-link'>Link</Button>
</PageWrapper>
</React.Fragment>
)
}
5 changes: 2 additions & 3 deletions dev/src/app/components/buttons/with_icon/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Button } from '@/components/button/Button'
import { PageWrapper } from '@/pageComponents/PageWrapper'
import React from 'react'
import {
BsCalendarEventFill,
Expand All @@ -16,7 +15,7 @@ import {

export default function page() {
return (
<PageWrapper title='Buttons' description='Clicky'>
<React.Fragment>
<Button>
<BsCartFill className='w-4 h-4' /> Default
</Button>
Expand Down Expand Up @@ -67,6 +66,6 @@ export default function page() {
<BsLink className='w-4 h-4' />
Link
</Button>
</PageWrapper>
</React.Fragment>
)
}
11 changes: 5 additions & 6 deletions dev/src/app/components/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { NavBar } from '@/pageComponents/NavBar'
import { PageWrapper } from '@/pageComponents/PageWrapper'
import React from 'react'

export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang='en'>
<body>
<NavBar />
<PageWrapper>{children}</PageWrapper>
</body>
</html>
<React.Fragment>
<NavBar />
<PageWrapper>{children}</PageWrapper>
</React.Fragment>
)
}
14 changes: 14 additions & 0 deletions dev/src/app/components/modals/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { PageTitle } from '@/pageComponents/PageWrapper'
import React from 'react'

export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<PageTitle title='Modals' description='Awesome popups'>
{children}
</PageTitle>
)
}
Loading

1 comment on commit 7c64ee9

@vercel
Copy link

@vercel vercel bot commented on 7c64ee9 Jun 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

gryt-ui – ./

gryt-ui.vercel.app
gryt-ui-gryt.vercel.app
ui.gryt.chat
gryt-ui-git-main-gryt.vercel.app

Please sign in to comment.