Merge pull request #14 from ivalshamkya/feat/card

feat/card
ivalshamkya · Jan 25, 2024 · c76957b · c76957b
2 parents 176cdb3 + a183604
commit c76957b
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 79 deletions.
diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
@@ -10,7 +10,18 @@ jobs:
   Deploy-Preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
       - name: Pull Vercel Environment Information

diff --git a/public/aiko.jpeg b/public/aiko.jpeg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,10 +3,10 @@ import { Inter, IBM_Plex_Mono, Darker_Grotesque, Bricolage_Grotesque } from 'nex
 import './globals.css'
 import Navbar from '@/components/Navbar'
 
-const inter = Inter({ subsets: ['latin'] })
-const ibm = IBM_Plex_Mono({ subsets: ['latin'], weight: "500" })
-const Grotesque = Darker_Grotesque({ subsets: ['latin'], weight: "500" })
-const bricolage = Bricolage_Grotesque({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false })
+const ibm = IBM_Plex_Mono({ subsets: ['latin'], weight: "500", display: 'swap', adjustFontFallback: false })
+const Grotesque = Darker_Grotesque({ subsets: ['latin'], weight: "500", display: 'swap', adjustFontFallback: false })
+const bricolage = Bricolage_Grotesque({ subsets: ['latin'], display: 'swap', adjustFontFallback: false })
 
 export const metadata: Metadata = {
   title: 'NeoBruu',

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -3,18 +3,10 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { AiFillGithub } from "react-icons/ai";
-import { CgDarkMode, CgMoon, CgSun } from "react-icons/cg";
-import { IoIosMoon, IoIosSunny } from "react-icons/io";
-import { RiMoonClearFill } from "react-icons/ri";
 import SearchBar from "./SearchBar";
 
 function Navbar() {
   const [theme, setTheme] = useState<string>("");
-  const [search, setSearch] = useState<string>("");
-
-  const handleClick = () => {
-    setTheme(theme === "light" ? "dark" : "light");
-  };
 
   useEffect(() => {
     setTheme((prev) => localStorage.getItem("theme") ?? "light");
@@ -41,17 +33,6 @@ function Navbar() {
             >
             <AiFillGithub className="h-6 w-6 text-white" />
             </a>
-            {/* <button
-            type="button"
-            onClick={handleClick}
-            className="flex items-center justify-center rounded-md border border-black p-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] shadow-orange-400/40 transition-all hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none dark:border-zinc-600 dark:shadow-yellow-400/40"
-            >
-            {theme === "light" ? (
-                <IoIosSunny className="h-6 w-6 text-orange-400" />
-            ) : (
-                <RiMoonClearFill className="h-6 w-6 text-yellow-400" />
-            )}
-            </button> */}
         </div>
       </div>
     </nav>

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -1,8 +1,9 @@
+import Link from 'next/link';
 import { useState, useEffect, ChangeEvent, useRef } from 'react';
+
+import components from '@/data/components';
 import { CgClose, CgSearch } from 'react-icons/cg';
 import { MdAdd, MdKeyboardCommandKey } from "react-icons/md";
-import components from '@/data/components'; // Update the path
-import Link from 'next/link';
 import { RxComponent1 } from "react-icons/rx";
 
 type SearchBarProps = {};

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -2,8 +2,7 @@
 import { usePathname } from 'next/navigation';
 import components from '@/data/components';
 import Link from 'next/link';
-import Badge from './neobruu/Badge';
-import { metadata } from '@/app/layout';
+import Badge from '@/components/neobruu/Badge';
 
 export default function Sidebar() {
   const pathname = usePathname();

diff --git a/src/components/example/AlertExample.tsx b/src/components/example/AlertExample.tsx
@@ -1,6 +1,5 @@
-import Button from "@/components/neobruu/Button";
 import Alert from "@/components/neobruu/Alert";
-import { BsInfoCircleFill, BsExclamationTriangleFill } from "react-icons/Bs";
+import { BsInfoCircleFill, BsExclamationTriangleFill } from "react-icons/bs";
 
 export default function AlertExample() {
     return (

diff --git a/src/components/example/CardExample.tsx b/src/components/example/CardExample.tsx
@@ -1,13 +1,16 @@
-import { Card } from "@/components/neobruu/Card";
-import Button from "../neobruu/Button";
+import Card from "@/components/neobruu/Card";
+import Button from "@/components/neobruu/Button";
 
 export default function CardExample() {
   return (
     <div className="flex gap-3">
       <Card rounded="none">
-        <Card.Header imageUrl="https://picsum.photos/200.webp" />
+        <Card.Header imageUrl="/aiko.jpeg" />
         <Card.Body>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium rem cum nisi molestiae voluptatibus nemo eaque doloremque tempora incidunt laborum! Obcaecati ipsum ducimus ad aliquid cum delectus adipisci ratione dolores.
+          <h1 className="text-2xl font-bold mb-2">Aiko 🐈</h1>
+          <p className="line-clamp-4">
+          Meet the orange cat, a charismatic furball with a coat as vibrant as a summer sunset. This feline fashionista proudly dons a luxurious fur ensemble in various shades of citrus, making every day a catwalk. With eyes that sparkle like the juiciest mandarin, this orange fluff-master struts through life, leaving a trail of paw prints and a lingering scent of sunshine. Known for stealing hearts faster than you can peel an orange, this cat is the ultimate blend of mischief and zest, making it the purrfect companion for anyone in need of a daily dose of Vitamin Cuteness. 🍊😺
+          </p>
         </Card.Body>
         <Card.Footer>
           <Button>Read More</Button>

diff --git a/src/components/example/TabsExample.tsx b/src/components/example/TabsExample.tsx
@@ -1,7 +1,6 @@
 'use client'
 import Tabs from '@/components/neobruu/Tabs';
 
-
 export default function TabsExample() {
 
     return (

diff --git a/src/components/example/ToastExample.tsx b/src/components/example/ToastExample.tsx
@@ -1,7 +1,5 @@
 'use client'
-
 import Toast from "@/components/neobruu/Toast";
-import Button from "../neobruu/Button";
 import { useState } from "react";
 
 export default function ToastExample() {

diff --git a/src/components/neobruu/Card.tsx b/src/components/neobruu/Card.tsx
@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 type CardProps = {
     rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
     children: React.ReactNode
@@ -15,40 +17,43 @@ type CardBodyProps = {
     children: React.ReactNode;
 };
 
-export const Card: React.FC<CardProps> & {
-    Header: React.FC<CardHeaderProps>;
-    Footer: React.FC<CardFooterProps>;
-    Body: React.FC<CardBodyProps>;
-} = ({ rounded = 'none', children }) => {
+function Card({ rounded = 'none', children }: CardProps) {
     return (
         <div className={`w-[350px] h-full border-black border-2 rounded-${rounded} shadow-[8px_8px_0px_rgba(0,0,0,1)] bg-white`}>
             {children}
         </div>
     );
 };
 
-Card.Header = ({ imageUrl }) => (
-    <a href="" className="block cursor-pointer h-[250px]">
-        <article className="w-full h-[250px]">
-            <figure className="w-full h-[250px] border-black border-b-2">
-                <img
-                    src={imageUrl}
-                    alt="thumbnail"
-                    className="w-full h-full object-cover"
-                />
-            </figure>
-        </article>
-    </a>
-);
-
-Card.Footer = ({ children }) => (
-    <div className="px-6 py-5 text-left h-full">
-        {children}
-    </div>
-);
-
-Card.Body = ({ children }) => (
-    <div className="px-6 py-5 text-left h-full">
-        {children}
-    </div>
-);
+Card.Header = function CardHeader({ imageUrl }: CardHeaderProps) {
+    return (
+        <a href="" className="relative block cursor-pointer h-[300px]">
+            <article className="w-full h-[300px]">
+                <figure className="w-full h-[300px] border-black border-b-2">
+                    <Image
+                        src={imageUrl}
+                        alt="thumbnail"
+                        fill={true}
+                    />
+                </figure>
+            </article>
+        </a>
+    );
+}
+Card.Footer = function CardFooter({ children }: CardFooterProps) {
+    return (
+        <div className="px-6 py-5 text-left h-full">
+            {children}
+        </div>
+    );
+}
+
+Card.Body = function CardBody({ children }: CardBodyProps) {
+    return (
+        <div className="px-6 py-5 text-justify h-full">
+            {children}
+        </div>
+    );
+}
+
+export default Card;
diff --git a/src/data/components.ts b/src/data/components.ts
@@ -2,7 +2,7 @@ import Alert from '@/components/neobruu/Alert'
 import Avatar from '@/components/neobruu/Avatar'
 import Button from '@/components/neobruu/Button'
 import Badge from '@/components/neobruu/Badge'
-import { Card } from '@/components/neobruu/Card'
+import Card from '@/components/neobruu/Card'
 import Checkbox from '@/components/neobruu/Checkbox'
 import Dropdown from '@/components/neobruu/Dropdown'
 import Input from '@/components/neobruu/Input'
@@ -37,7 +37,7 @@ type ComponentObj = {
 const components: ComponentObj[] = [
   {
     name: 'Button',
-    sub: 'button',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Button,
     exampleComponent: ButtonExample,
     prevComponent: 'Badge',
@@ -46,7 +46,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Toast',
-    sub: 'Toast',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Toast,
     exampleComponent: ToastExample,
     prevComponent: 'Badge',
@@ -55,7 +55,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Alert',
-    sub: 'alert',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Alert,
     exampleComponent: AlertExample,
     prevComponent: 'Badge',
@@ -64,6 +64,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Badge',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Badge,
     exampleComponent: BadgeExample,
     prevComponent: 'Badge',
@@ -72,7 +73,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Checkbox',
-    sub: 'Checkbox',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Checkbox,
     exampleComponent: CheckboxExample,
     prevComponent: 'Badge',
@@ -81,7 +82,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Avatar',
-    sub: 'Avatar',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Avatar,
     exampleComponent: AvatarExample,
     prevComponent: 'Badge',
@@ -90,7 +91,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Tooltip',
-    sub: 'Tooltip',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Tooltip,
     exampleComponent: TooltipExample,
     prevComponent: 'Badge',
@@ -99,7 +100,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Dropdown',
-    sub: 'Dropdown',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Dropdown,
     exampleComponent: DropdownExample,
     prevComponent: 'Badge',
@@ -108,7 +109,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Tabs',
-    sub: 'Tabs',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Tabs,
     exampleComponent: TabsExample,
     prevComponent: 'Badge',
@@ -117,7 +118,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Input',
-    sub: 'Displays a form input field or a component that looks like an input field.',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     component: Input,
     exampleComponent: InputExample,
     prevComponent: 'Badge',
@@ -126,7 +127,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Textarea',
-    sub: 'Displays a form textarea field or a component that looks like an textarea.',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     isNew: true,
     component: Textarea,
     exampleComponent: TextareaExample,
@@ -136,7 +137,7 @@ const components: ComponentObj[] = [
 
   {
     name: 'Card',
-    sub: 'Displays a form Card field or a component that looks like an Card.',
+    sub: 'Lorem ipsum dolor sit amet, consectetur',
     isNew: true,
     component: Card,
     exampleComponent: CardExample,