Moved component library

dev/package.json

@@ -23,8 +23,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
-    "typescript": "4.9.4",
-    "@gryt/ui": "link:../dist"
+    "typescript": "4.9.4"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

dev/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

dev/src/pages/components/avatars.tsx

@@ -0,0 +1,63 @@
+import { Avatar } from '@/index'
+import React from 'react'
+import { ComponentsWrapper } from '..'
+
+export default function badges() {
+  return (
+    <ComponentsWrapper>
+      <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>
+
+        <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>
+
+        <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'>Grid of avatars</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>
+    </ComponentsWrapper>
+  )
+}

dev/src/pages/components/badges.tsx

@@ -0,0 +1,118 @@
+import {
+  BsCalendarEventFill,
+  BsCartFill,
+  BsCheckCircleFill,
+  BsDoorOpenFill,
+  BsExclamationTriangleFill,
+  BsFillExclamationCircleFill,
+  BsHandIndexFill,
+  BsInfoSquareFill,
+  BsXCircleFill
+} from 'react-icons/bs'
+import React from 'react'
+import { ComponentsWrapper } from '..'
+import { Badge } from '@/index'
+
+export default function badges() {
+  return (
+    <ComponentsWrapper>
+      <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='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>
+    </ComponentsWrapper>
+  )
+}

dev/src/pages/components/buttons.tsx

@@ -0,0 +1,143 @@
+import {
+  BsCalendarEventFill,
+  BsCartFill,
+  BsCheckCircleFill,
+  BsDoorOpenFill,
+  BsExclamationTriangleFill,
+  BsFillExclamationCircleFill,
+  BsHandIndexFill,
+  BsInfoSquareFill,
+  BsLink,
+  BsXCircleFill
+} from 'react-icons/bs'
+import React from 'react'
+import { ComponentsWrapper } from '..'
+import { Button } from '@/index'
+
+export default function buttons() {
+  return (
+    <ComponentsWrapper>
+      <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>
+          <Button>Normal</Button>
+          <Button type='btn-primary'>Primary</Button>
+          <Button type='btn-secondary'>Secondary</Button>
+          <Button type='btn-accent'>Accent</Button>
+          <Button type='btn-ghost'>Ghost</Button>
+          <Button type='btn-outline'>Outline</Button>
+          <Button type='btn-active'>Active</Button>
+          <Button type='btn-disabled'>Disabled</Button>
+          <Button type='btn-error'>Error</Button>
+          <Button type='btn-warning'>Warning</Button>
+          <Button type='btn-info'>Info</Button>
+          <Button type='btn-success'>Success</Button>
+          <Button type='btn-link'>Link</Button>
+        </div>
+
+        <div className='flex flex-col gap-2 items-center'>
+          <h1 className='font-semibold text-lg'>Icon and text</h1>
+          <Button>
+            <BsCartFill className='w-4 h-4' /> Normal
+          </Button>
+          <Button type='btn-primary'>
+            <BsHandIndexFill className='w-4 h-4' /> Primary
+          </Button>
+          <Button type='btn-secondary'>
+            <BsCheckCircleFill className='w-4 h-4' />
+            Secondary
+          </Button>
+          <Button type='btn-accent'>
+            <BsXCircleFill className='w-4 h-4' />
+            Accent
+          </Button>
+          <Button type='btn-ghost'>
+            <BsCalendarEventFill className='w-4 h-4' />
+            Ghost
+          </Button>
+          <Button type='btn-outline'>
+            <BsDoorOpenFill className='w-4 h-4' />
+            Outline
+          </Button>
+          <Button type='btn-active'>
+            <BsDoorOpenFill className='w-4 h-4' />
+            Active
+          </Button>
+          <Button type='btn-disabled'>
+            <BsDoorOpenFill className='w-4 h-4' />
+            Disabled
+          </Button>
+          <Button type='btn-error'>
+            <BsExclamationTriangleFill className='w-4 h-4' />
+            Error
+          </Button>
+          <Button type='btn-warning'>
+            <BsFillExclamationCircleFill className='w-4 h-4' />
+            Warning
+          </Button>
+          <Button type='btn-info'>
+            <BsInfoSquareFill className='w-4 h-4' />
+            Info
+          </Button>
+          <Button type='btn-success'>
+            <BsCheckCircleFill className='w-4 h-4' />
+            Success
+          </Button>
+          <Button type='btn-link'>
+            <BsLink className='w-4 h-4' />
+            Link
+          </Button>
+        </div>
+
+        <div className='flex flex-col gap-2 items-center'>
+          <h1 className='font-semibold text-lg'>Icons only</h1>
+          <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>
+        </div>
+      </div>
+    </ComponentsWrapper>
+  )
+}