Skip to content

Commit

Permalink
Added colors and updated each page with new grid
Browse files Browse the repository at this point in the history
  • Loading branch information
SivertGullbergHansen committed Sep 22, 2023
1 parent 16748e8 commit 7fabc5c
Show file tree
Hide file tree
Showing 13 changed files with 215 additions and 127 deletions.
4 changes: 2 additions & 2 deletions dev/src/app/components/avatars/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import React from 'react'

export default function badges() {
return (
<React.Fragment>
<div className='grid grid-cols-2 gap-12'>
<Section header='Rounded'>
<Avatar src='/images/duck.jpeg' status='online' />
<Avatar src='/images/cowboy.jpeg' />
Expand All @@ -22,6 +22,6 @@ export default function badges() {
<Avatar src='/images/cowboy.jpeg' type='square' />
<Avatar src='/images/cat.png' type='square' status='ingame' />
</Section>
</React.Fragment>
</div>
)
}
184 changes: 88 additions & 96 deletions dev/src/app/components/badges/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,104 +14,96 @@ import { Badge } from '@/index'

export default function badges() {
return (
<React.Fragment>
<div
className='grid gap-9 place-content-center w-full'
style={{
gridTemplateColumns: 'repeat(auto-fit, 280px)',
gridAutoFlow: 'dense'
}}
>
<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Regular</h1>
<Badge>Normal</Badge>
<Badge type='badge-primary'>Primary</Badge>
<Badge type='badge-secondary'>Secondary</Badge>
<Badge type='badge-accent'>Accent</Badge>
<Badge type='badge-ghost'>Ghost</Badge>
<Badge type='badge-outline'>Outline</Badge>
<Badge type='badge-error'>Error</Badge>
<Badge type='badge-warning'>Warning</Badge>
<Badge type='badge-info'>Info</Badge>
<Badge type='badge-success'>Success</Badge>
</div>
<div className='grid grid-cols-6 gap-12'>
<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Regular</h1>
<Badge>Normal</Badge>
<Badge type='badge-primary'>Primary</Badge>
<Badge type='badge-secondary'>Secondary</Badge>
<Badge type='badge-accent'>Accent</Badge>
<Badge type='badge-ghost'>Ghost</Badge>
<Badge type='badge-outline'>Outline</Badge>
<Badge type='badge-error'>Error</Badge>
<Badge type='badge-warning'>Warning</Badge>
<Badge type='badge-info'>Info</Badge>
<Badge type='badge-success'>Success</Badge>
</div>

<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Icon and text</h1>
<Badge>
<BsCartFill className='w-4 h-4' /> Normal
</Badge>
<Badge type='badge-primary'>
<BsHandIndexFill className='w-4 h-4' /> Primary
</Badge>
<Badge type='badge-secondary'>
<BsCheckCircleFill className='w-4 h-4' />
Secondary
</Badge>
<Badge type='badge-accent'>
<BsXCircleFill className='w-4 h-4' />
Accent
</Badge>
<Badge type='badge-ghost'>
<BsCalendarEventFill className='w-4 h-4' />
Ghost
</Badge>
<Badge type='badge-outline'>
<BsDoorOpenFill className='w-4 h-4' />
Outline
</Badge>
<Badge type='badge-error'>
<BsExclamationTriangleFill className='w-4 h-4' />
Error
</Badge>
<Badge type='badge-warning'>
<BsFillExclamationCircleFill className='w-4 h-4' />
Warning
</Badge>
<Badge type='badge-info'>
<BsInfoSquareFill className='w-4 h-4' />
Info
</Badge>
<Badge type='badge-success'>
<BsCheckCircleFill className='w-4 h-4' />
Success
</Badge>
</div>
<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Icon and text</h1>
<Badge>
<BsCartFill className='w-4 h-4' /> Normal
</Badge>
<Badge type='badge-primary'>
<BsHandIndexFill className='w-4 h-4' /> Primary
</Badge>
<Badge type='badge-secondary'>
<BsCheckCircleFill className='w-4 h-4' />
Secondary
</Badge>
<Badge type='badge-accent'>
<BsXCircleFill className='w-4 h-4' />
Accent
</Badge>
<Badge type='badge-ghost'>
<BsCalendarEventFill className='w-4 h-4' />
Ghost
</Badge>
<Badge type='badge-outline'>
<BsDoorOpenFill className='w-4 h-4' />
Outline
</Badge>
<Badge type='badge-error'>
<BsExclamationTriangleFill className='w-4 h-4' />
Error
</Badge>
<Badge type='badge-warning'>
<BsFillExclamationCircleFill className='w-4 h-4' />
Warning
</Badge>
<Badge type='badge-info'>
<BsInfoSquareFill className='w-4 h-4' />
Info
</Badge>
<Badge type='badge-success'>
<BsCheckCircleFill className='w-4 h-4' />
Success
</Badge>
</div>

<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Icons only</h1>
<Badge>
<BsCartFill className='w-4 h-4' />
</Badge>
<Badge type='badge-primary'>
<BsHandIndexFill className='w-4 h-4' />
</Badge>
<Badge type='badge-secondary'>
<BsCheckCircleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-accent'>
<BsXCircleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-ghost'>
<BsCalendarEventFill className='w-4 h-4' />
</Badge>
<Badge type='badge-outline'>
<BsDoorOpenFill className='w-4 h-4' />
</Badge>
<Badge type='badge-error'>
<BsExclamationTriangleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-warning'>
<BsFillExclamationCircleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-info'>
<BsInfoSquareFill className='w-4 h-4' />
</Badge>
<Badge type='badge-success'>
<BsCheckCircleFill className='w-4 h-4' />
</Badge>
</div>
<div className='flex flex-col gap-2 items-center'>
<h1 className='font-semibold text-lg'>Icons only</h1>
<Badge>
<BsCartFill className='w-4 h-4' />
</Badge>
<Badge type='badge-primary'>
<BsHandIndexFill className='w-4 h-4' />
</Badge>
<Badge type='badge-secondary'>
<BsCheckCircleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-accent'>
<BsXCircleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-ghost'>
<BsCalendarEventFill className='w-4 h-4' />
</Badge>
<Badge type='badge-outline'>
<BsDoorOpenFill className='w-4 h-4' />
</Badge>
<Badge type='badge-error'>
<BsExclamationTriangleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-warning'>
<BsFillExclamationCircleFill className='w-4 h-4' />
</Badge>
<Badge type='badge-info'>
<BsInfoSquareFill className='w-4 h-4' />
</Badge>
<Badge type='badge-success'>
<BsCheckCircleFill className='w-4 h-4' />
</Badge>
</div>
</React.Fragment>
</div>
)
}
4 changes: 2 additions & 2 deletions dev/src/app/components/buttons/icons_only/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {

export default function page() {
return (
<React.Fragment>
<div className='grid grid-cols-6 gap-12'>
<Button iconOnly='btn-square'>
<BsCartFill className='w-4 h-4' />
</Button>
Expand Down Expand Up @@ -55,6 +55,6 @@ export default function page() {
<Button type='btn-link' iconOnly='btn-square'>
<BsLink className='w-4 h-4' />
</Button>
</React.Fragment>
</div>
)
}
4 changes: 2 additions & 2 deletions dev/src/app/components/buttons/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Section } from '@/pageComponents/Section'

export default function buttons() {
return (
<React.Fragment>
<div className='grid grid-cols-2 gap-12'>
<Section header='Normal'>
<Button>Activate</Button>
<Button type='btn-secondary'>Disable</Button>
Expand Down Expand Up @@ -37,6 +37,6 @@ export default function buttons() {
<BsCheckCircleFill className='w-4 h-4' />
</Button>
</Section>
</React.Fragment>
</div>
)
}
4 changes: 2 additions & 2 deletions dev/src/app/components/buttons/regular/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react'

export default function page() {
return (
<React.Fragment>
<div className='grid grid-cols-4 gap-12'>
<Button>Default</Button>
<Button type='btn-primary'>Primary</Button>
<Button type='btn-secondary'>Secondary</Button>
Expand All @@ -17,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>
</React.Fragment>
</div>
)
}
4 changes: 2 additions & 2 deletions dev/src/app/components/buttons/with_icon/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {

export default function page() {
return (
<React.Fragment>
<div className='grid grid-cols-4 gap-12'>
<Button>
<BsCartFill className='w-4 h-4' /> Default
</Button>
Expand Down Expand Up @@ -66,6 +66,6 @@ export default function page() {
<BsLink className='w-4 h-4' />
Link
</Button>
</React.Fragment>
</div>
)
}
14 changes: 14 additions & 0 deletions dev/src/app/components/colors/layout.tsx
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='Colors' description='Eyecandy'>
{children}
</PageTitle>
)
}
78 changes: 78 additions & 0 deletions dev/src/app/components/colors/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
'use client'

import React from 'react'
import { Section } from '@/pageComponents/Section'

export default function colors() {
function ColorPalette({ className }: { className?: string | undefined }) {
return (
<button
onClick={() => {
if (className)
navigator.clipboard.writeText(className?.slice(3, className.length))
}}
className='flex flex-col gap-1 items-center justify-center'
>
<div className={`${className} w-24 h-24 rounded-lg`} />
<p className='text-xs font-medium'>
{className?.slice(3, className.length)}
</p>
</button>
)
}

return (
<div className='grid grid-cols-2 gap-12'>
<Section header='Base'>
<ColorPalette className='bg-base-100' />
<ColorPalette className='bg-base-200' />
<ColorPalette className='bg-base-300' />
<ColorPalette className='bg-base-content' />
</Section>

<Section header='Primary'>
<ColorPalette className='bg-primary' />
<ColorPalette className='bg-primary-focus' />
<ColorPalette className='bg-primary-content' />
</Section>

<Section header='Secondary'>
<ColorPalette className='bg-secondary' />
<ColorPalette className='bg-secondary-focus' />
<ColorPalette className='bg-secondary-content' />
</Section>

<Section header='Accent'>
<ColorPalette className='bg-accent' />
<ColorPalette className='bg-accent-focus' />
<ColorPalette className='bg-accent-content' />
</Section>

<Section header='Neutral'>
<ColorPalette className='bg-neutral' />
<ColorPalette className='bg-neutral-focus' />
<ColorPalette className='bg-neutral-content' />
</Section>

<Section header='Info'>
<ColorPalette className='bg-info' />
<ColorPalette className='bg-info-content' />
</Section>

<Section header='Success'>
<ColorPalette className='bg-success' />
<ColorPalette className='bg-success-content' />
</Section>

<Section header='Warning'>
<ColorPalette className='bg-warning' />
<ColorPalette className='bg-warning-content' />
</Section>

<Section header='Error'>
<ColorPalette className='bg-error' />
<ColorPalette className='bg-error-content' />
</Section>
</div>
)
}
4 changes: 2 additions & 2 deletions dev/src/app/components/inputs/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import InputGroup from '@/components/InputGroup/InputGroup'

export default function buttons() {
return (
<React.Fragment>
<div className='grid grid-cols-2 gap-12'>
<Section header='Checkbox'>
<Checkbox checkboxAnimated />
<Checkbox
Expand Down Expand Up @@ -76,6 +76,6 @@ export default function buttons() {
</InputGroup>
</div>
</Section>
</React.Fragment>
</div>
)
}
Loading

1 comment on commit 7fabc5c

@vercel
Copy link

@vercel vercel bot commented on 7fabc5c Sep 22, 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-git-main-gryt.vercel.app
gryt-ui-gryt.vercel.app
gryt-ui.vercel.app
ui.gryt.chat

Please sign in to comment.