Merge pull request #24 from ivalshamkya/feat/button

Feat/button

package.json

@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "framer-motion": "^10.18.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^4.12.0",
-    "shiki": "^0.14.7"
+    "shiki": "^0.14.7",
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/docs/installation/page.tsx

@@ -0,0 +1,59 @@
+import Pagination from "@/components/Pagination";
+
+
+export default function Installation() {
+  return (
+    <>
+      <h2 className="text-4xl font-bold">Installation</h2>
+
+      <div className="mt-8 text-lg font-light leading-relaxed">
+        These React components use{' '}
+        <a
+          className="mx-0.5 underline"
+          target="_blank"
+          href="https://tailwindcss.com/"
+        >
+          tailwind
+        </a>{' '}
+        for styling and{' '}
+        <a
+          className="mx-0.5 underline"
+          target="_blank"
+          href="https://react-icons.github.io/react-icons/"
+        >
+          react-icons
+        </a>{' '}
+        for icons (feel free to use any other icons), so make sure you got them
+        installed.
+        <br />
+        <br />
+        Now choose any component you find useful, copy it to your project and
+        adjust it so it fulfills your needs.
+        <br />
+        <br />
+        Keep in mind that these are YOUR components. It&apos;s on you to make
+        them more reusable and accessible. I created this to help you get
+        started with neobrutalism.{' '}
+        <a
+          href="https://www.youtube.com/watch?v=eXRlVpw1SIQ&ab_channel=Joshtriedcoding"
+          target="_blank"
+          className="mx-0.5 underline"
+        >
+          This video
+        </a>{' '}
+        can help you with creating more reusable components.
+      </div>
+
+      <Pagination
+        prev={{
+          name: 'Introduction',
+          path: '/docs',
+        }}
+        next={{
+          name: 'Accordion',
+          path: '/docs/components/Accordion',
+        }}
+      />
+    </>
+  )
+}

src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Button from '@/components/neobruu/Button'
+import {Button} from '@/components/neobruu/Button'
 import Image from 'next/image'
 import { IoLogoGithub } from 'react-icons/io'
 import { motion } from 'framer-motion'
@@ -21,7 +21,7 @@ export default function Home() {
           <div className='flex flex-wrap justify-center gap-2.5 md:gap-5'>
             <Link
               href={`/docs`}>
-              <Button variant='primary' rounded='lg'>
+              <Button variant='default' rounded='lg'>
                 🚀 Get Started
               </Button>
             </Link>

src/components/CopyCode.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React, { useState } from 'react'
-import Button from './neobruu/Button'
+import { Button } from './neobruu/Button'
 import { IoCheckmark, IoCopy } from 'react-icons/io5'
 
 export default function CopyCode({ code }: { code: string }) {

src/components/MobileSidebar.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { HiMenuAlt2 } from "react-icons/hi"
 import components from "@/data/components";
 import Drawer from "@/components/neobruu/Drawer";
-import Button from "@/components/neobruu/Button";
 import Badge from "@/components/neobruu/Badge";
 
 export default function MobileSidebar() {

src/components/Pagination.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useRouter } from 'next/navigation'
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'
-import Button from './neobruu/Button'
+import {Button} from '@/components/neobruu/Button'
 
 type Props = {
   prev?: {
@@ -30,7 +30,7 @@ export default function Pagination({ prev, next }: Props) {
   return (
     <div className={`${justifyContent} mt-8 flex w-full items-center`}>
       {prev?.name && (
-        <Button rounded='xl' variant='yellow' onClick={() => {
+        <Button variant='yellow' onClick={() => {
           router.push(prev.path)
         }}>
           <FaChevronLeft className="mr-2" />
@@ -39,7 +39,7 @@ export default function Pagination({ prev, next }: Props) {
       )}
 
       {next?.name && (
-        <Button rounded='xl' variant='yellow' onClick={() => {
+        <Button variant='yellow' onClick={() => {
           router.push(next.path)
         }}>
           {next.name}

src/components/example/BadgeExample.tsx

@@ -3,8 +3,8 @@ import Badge from "@/components/neobruu/Badge";
 export default function BadgeExample() {
     return (
       <div className="flex flex-wrap gap-3">
-        <Badge text="Hello World" variant="primary" rounded="none" />
-        <Badge text="Hello World" variant="secondary" rounded="sm" />
+        <Badge text="Hello World" variant="default" rounded="none" />
+        <Badge text="Hello World" variant="pink" rounded="sm" />
         <Badge text="Hello World" variant="blue" rounded="md" />
         <Badge text="Hello World" variant="green" rounded="lg" />
         <Badge text="Hello World" variant="red" rounded="xl" />

src/components/example/ButtonExample.tsx

@@ -1,10 +1,10 @@
-import Button from "@/components/neobruu/Button";
+import { Button } from "@/components/neobruu/Button";
 
 export default function ButtonExample() {
     return (
       <div className="flex gap-3">
-        <Button variant="primary" rounded="none">Button</Button>
-        <Button variant="secondary" rounded="lg">Button</Button>
+        <Button variant="default" rounded="none">Button</Button>
+        <Button variant="pink" rounded="lg">Button</Button>
         <Button variant="blue" rounded="full">Button</Button>
       </div>
     )

src/components/example/CardExample.tsx

@@ -1,5 +1,5 @@
 import Card from "@/components/neobruu/Card";
-import Button from "@/components/neobruu/Button";
+import { Button } from "@/components/neobruu/Button";
 
 export default function CardExample() {
   return (

src/components/example/DialogExample.tsx

@@ -2,7 +2,7 @@
 import { useState } from "react";
 
 import Dialog from "@/components/neobruu/Dialog";
-import Button from "@/components/neobruu/Button";
+import {Button} from "@/components/neobruu/Button";
 
 export default function DialogExample() {
   const [showDialog, setShowDialog] = useState(false);
@@ -26,7 +26,7 @@ export default function DialogExample() {
           </Dialog.Content>
           <Dialog.Footer>
             <div className="flex gap-3">
-                  <Button rounded="none">Okay</Button>
+                  <Button variant={"default"}>Okay</Button>
                 </div>
           </Dialog.Footer>
         </Dialog>

src/components/example/DrawerExample.tsx

@@ -1,7 +1,7 @@
 'use client'
 import Drawer from "@/components/neobruu/Drawer";
 import { useState } from "react";
-import Button from "@/components/neobruu/Button";
+import { Button } from "@/components/neobruu/Button";
 
 export default function DrawerExample() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);

src/components/example/ToastExample.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { HiExclamation } from  "react-icons/hi"
 
 import Toast from "@/components/neobruu/Toast";
-import Button from "@/components/neobruu/Button";
+import {Button} from "@/components/neobruu/Button";
 
 export default function ToastExample() {
   const [showToast, setShowToast] = useState(false);

src/components/example/TooltipExample.tsx

@@ -1,13 +1,13 @@
 import Tooltip from "@/components/neobruu/Tooltip";
-import Button from "@/components/neobruu/Button";
+import { Button } from "@/components/neobruu/Button";
 
 
 export default function TooltipExample() {
   return (
     <div className="flex gap-3">
       <Tooltip position="top">
         <Tooltip.Hover>
-          <Button variant="primary" rounded="md">Hover</Button>
+          <Button variant="default" rounded="md">Hover</Button>
         </Tooltip.Hover>
         <Tooltip.Content rounded="md" variant="red">Hello World!</Tooltip.Content>
       </Tooltip>