Merge pull request #26 from ivalshamkya/development

Development

src/app/docs/installation/page.tsx

@@ -1,3 +1,4 @@
+import Code from "@/components/Code";
 import Pagination from "@/components/Pagination";
 
 
@@ -7,41 +8,42 @@ export default function Installation() {
       <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.
+        These components are styled using <a href="https://tailwindcss.com/" className="underline">Tailwind CSS</a> and feature icons powered by <a href="https://react-icons.github.io/react-icons/" className="underline">react-icons</a> (although you`re free to use any other icon library of your choice).
+      </div>
+
+      <div className="mt-8 text-lg font-light leading-relaxed">
+        <h2 className="text-2xl font-medium">Installation Guide:</h2>
+        <h5 className="text-lg font-medium mt-5">Prerequisites:</h5>
+
+        Ensure you have Node.js and npm (or yarn) installed on your system.
+
+        <h5 className="text-lg font-medium mt-5">Installation Steps:</h5>
+        <ul className="list-decimal list-inside space-y-4">
+          <li>Navigate to the root directory of your project in the terminal.</li>
+          <li>
+            Install the required dependencies by running the following command:
+            <Code code={`npm install clsx tailwind-merge class-variance-authority
+# or
+pnpm add clsx tailwind-merge class-variance-authority`} header={"Terminal"} />
+          </li>
+          <li>
+            Create a file named utils.ts and paste the following code:
+            <Code code={`// lib/utils/utils.ts
+
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`} header={"Terminal"} />
+          </li>
+        </ul>
+
+        <h5 className="text-lg font-medium mt-5">Customization Instructions:</h5>
+        Choose any component you find useful, copy it to your project, and tailor it to meet your specific requirements. Remember, these components are customizable and adaptable to suit your needs.
+        <br /><br />
+        Keep in mind that these components are designed to kickstart your journey into neobrutalism. It`s up to you to enhance their reusability and accessibility.
       </div>
 
       <Pagination
@@ -54,6 +56,19 @@ export default function Installation() {
           path: '/docs/components/Accordion',
         }}
       />
+
+      <div className="flex items-center gap-1 text-sm pt-20 pb-14 font-medium text-neutral-900">
+        <span>©</span>
+        <span>{new Date().getFullYear()}</span>
+        <span>with</span>
+        <div className="relative inline-flex justify-center items-center">
+          <div className="text-red-500 rounded-full">❤️</div>
+          <div className="text-red-500 absolute top-0 left-0 animate-ping">❤️</div>
+          <div className="text-red-500 absolute top-0 left-0 animate-pulse">❤️</div>
+        </div>
+        <span>by</span>
+        <span className="hover:dark:text-neutral-400 cursor-pointer">Ival Shamkya</span>
+      </div>
     </>
   )
 }

src/app/docs/layout.tsx

@@ -2,7 +2,7 @@ import Sidebar from '@/components/Sidebar'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
-  title: 'Documentation - Neobrutalism Components',
+  title: 'Neobruu Components',
   description: 'Documentation for neobrutalism components.',
 }
 

src/app/layout.tsx

@@ -25,7 +25,7 @@ export const metadata: Metadata = {
     type: 'website',
     description:
       "'Neo-Brutalist reusable components written in React and Tailwind.'",
-    images: ['https://neobrutalism-components.vercel.app/preview.png'],
+    images: ['https://neobruu.vercel.app/mockup.png'],
     url: 'https://neobruu.vercel.app/',
     title: 'NeoBruu',
   },

src/app/page.tsx

@@ -35,30 +35,6 @@ export default function Home() {
             </Link>
           </div>
         </div>
-        <div className='absolute bottom-36 md:bottom-52 right-5'>
-          <div className='relative'>
-            <Image src="/star.svg" alt="star" fill={true} className='w-7 md:w-10 rotate-45' />
-          </div>
-        </div>
-        <div className='absolute bottom-20 right-5 '>
-          <div className='relative'>
-        <Image src="/star.svg" alt="star" fill={true} className='w-16 md:w-32 rotate-6' />
-          </div>
-        </div>
-        <motion.div
-          animate={{ scale: 1.1 }}
-          transition={{ duration: 1.5, repeat: Infinity, ease: 'easeIn' }}
-          className='absolute top-24 left-5 w-16 md:w-32'
-        >
-          <div className='relative'>
-
-          <Image
-            src="/heart.svg"
-            alt="Spinning Image"
-            fill={true}
-          />
-          </div>
-        </motion.div>
       </div>
       <Footer></Footer>
     </main>

src/components/Code.tsx

@@ -13,7 +13,7 @@ const Code = async ({ code, header }: { code: string; header?: string }) => {
         </div>
       )}
       <div
-        className="code-content p-5 overflow-x-auto h-[400px]"
+        className="code-content p-5 overflow-x-auto max-h-[500px]"
         dangerouslySetInnerHTML={{ __html: await highlight(code) }}
       />
     </div>

src/components/example/DropdownExample.tsx

@@ -4,7 +4,7 @@ import Dropdown from "@/components/neobruu/Dropdown";
 export default function DropdownExample() {
     return (
         <div className="flex gap-3">
-            <Dropdown label="Dropdown" rounded="lg" variant="primary">
+            <Dropdown label="Dropdown" rounded="none" variant="primary">
                 <Dropdown.Item>Dashboard</Dropdown.Item>
                 <Dropdown.Item>Settings</Dropdown.Item>
                 <Dropdown.Item>Sign Out</Dropdown.Item>

src/components/example/InputExample.tsx

@@ -17,7 +17,7 @@ export default function InputExample() {
 
     return (
         <div className="flex flex-wrap gap-3">
-            <Input type='text' name='text' value={value1} placeholder='Text' onChange={handleInput1} variant='dark' rounded='full'></Input>
+            <Input type='text' name='text' value={value1} placeholder='Text' onChange={handleInput1} variant='light' rounded='full'></Input>
             <Input type='text' name='text' value={value2} placeholder='Text' onChange={handleInput2} rounded='md'></Input>
         </div>
     );

src/components/example/TextareaExample.tsx

@@ -12,7 +12,7 @@ export default function TextareaExample() {
 
     return (
         <div className="flex gap-3">
-            <Textarea name='text' value={value} placeholder='Textarea' onChange={handleInput} rows={5} variant='primary' rounded='md' />
+            <Textarea name='text' value={value} placeholder='Textarea' onChange={handleInput} rows={5} variant='light' rounded='md' />
         </div>
     );
 }

src/components/neobruu/Button.tsx

@@ -25,8 +25,8 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 py-2 px-4 text-sm md:text-lg',
-        sm: 'h-9 px-2 rounded-md text-sm md:text-lg',
-        lg: 'h-10 md:h-12 px-5 md:px-8 rounded-md text-sm md:text-lg',
+        sm: 'h-9 px-2 text-sm md:text-lg',
+        lg: 'h-10 md:h-12 px-5 md:px-8 text-sm md:text-lg',
       },
       rounded: {
         none: 'rounded-none',
@@ -40,7 +40,7 @@ const buttonVariants = cva(
     defaultVariants: {
       variant: 'default',
       size: 'lg',
-      rounded: 'none'
+      rounded: 'sm'
     },
   }
 )
@@ -52,20 +52,20 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, children, href, variant, size, ...props }, ref) => {
+  ({ className, children, href, variant, size, rounded, ...props }, ref) => {
     if (href) {
       return (
         <Link
           href={href}
-          className={cn(buttonVariants({ variant, size, className }))}
+          className={cn(buttonVariants({ variant, rounded, size, className }))}
         >
           {children}
         </Link>
       )
     }
     return (
       <button
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(buttonVariants({ variant, rounded, size, className }))}
         ref={ref}
         {...props}
       >

src/data/components.ts

@@ -42,110 +42,96 @@ type ComponentObj = {
 
 const components: ComponentObj[] = [
   {
-    name: 'Button',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Button,
-    exampleComponent: ButtonExample,
-  },
-
-  {
-    name: 'Toast',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Toast,
-    exampleComponent: ToastExample,
+    name: 'Accordion',
+    sub: 'A collapsible content structure for organizing information efficiently.',
+    component: Accordion,
+    exampleComponent: AccordionExample,
   },
-
   {
     name: 'Alert',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
+    sub: 'Provides a mechanism for displaying important messages or notifications to users within the application interface.',
     component: Alert,
     exampleComponent: AlertExample,
   },
-
+  {
+    name: 'Avatar',
+    sub: 'Represents a user or entity with a visual representation.',
+    component: Avatar,
+    exampleComponent: AvatarExample,
+  },
   {
     name: 'Badge',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
+    sub: 'Small visual indicator typically used to convey status, notification count, or other contextual information within the user interface.',
     component: Badge,
     exampleComponent: BadgeExample,
   },
-
+  {
+    name: 'Button',
+    sub: 'Clickable element for user interaction.',
+    component: Button,
+    exampleComponent: ButtonExample,
+  },
+  {
+    name: 'Card',
+    sub: 'Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.',
+    component: Card,
+    exampleComponent: CardExample,
+  },
   {
     name: 'Checkbox',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
+    sub: 'Interactive element allowing users to select or deselect options within forms or lists.',
     component: Checkbox,
     exampleComponent: CheckboxExample,
   },
-
   {
-    name: 'Avatar',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Avatar,
-    exampleComponent: AvatarExample,
+    name: 'Dialog',
+    sub: 'Overlay component used to display important information, receive user input, or confirm actions within the application interface.',
+    isNew: true,
+    component: Dialog,
+    exampleComponent: DialogExample,
   },
-
   {
-    name: 'Tooltip',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Tooltip,
-    exampleComponent: TooltipExample,
+    name: 'Drawer',
+    sub: 'Sliding panel or container typically used for navigation, displaying additional content, or providing contextual options within the application interface.',
+    isNew: true,
+    component: Drawer,
+    exampleComponent: DrawerExample,
   },
-
   {
     name: 'Dropdown',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
+    sub: 'Interactive menu or list that expands or collapses to display a selection of options or actions for the user to choose from.',
     component: Dropdown,
     exampleComponent: DropdownExample,
   },
-
-  {
-    name: 'Tabs',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Tabs,
-    exampleComponent: TabsExample,
-  },
-
   {
     name: 'Input',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
+    sub: 'Interactive field for users to enter or edit text, numbers, or other data within forms or input fields.',
     component: Input,
     exampleComponent: InputExample,
   },
-
+  {
+    name: 'Tabs',
+    sub: 'Navigation element used to organize content into separate sections or categories, allowing users to switch between them to access different sets of information or functionality.',
+    component: Tabs,
+    exampleComponent: TabsExample,
+  },
   {
     name: 'Textarea',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
+    sub: 'Multiline input field allowing users to enter or edit longer pieces of text or content within forms or input areas.',
     component: Textarea,
     exampleComponent: TextareaExample,
   },
-
-  {
-    name: 'Card',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Card,
-    exampleComponent: CardExample,
-  },
-
   {
-    name: 'Accordion',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    component: Accordion,
-    exampleComponent: AccordionExample,
-  },
-
-  {
-    name: 'Drawer',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    isNew: true,
-    component: Drawer,
-    exampleComponent: DrawerExample,
+    name: 'Toast',
+    sub: 'Temporary notification or message displayed to users, provide feedback or alert about a specific event or action.',
+    component: Toast,
+    exampleComponent: ToastExample,
   },
-
   {
-    name: 'Dialog',
-    sub: 'Lorem ipsum dolor sit amet, consectetur',
-    isNew: true,
-    component: Dialog,
-    exampleComponent: DialogExample,
+    name: 'Tooltip',
+    sub: 'Small informational pop-up boxes that appear when users hover over an element, providing additional context or descriptions about the element or its functionality.',
+    component: Tooltip,
+    exampleComponent: TooltipExample,
   },
 ];