chore: update card image example

ivalshamkya · Jan 25, 2024 · a183604 · a183604
1 parent d97923c
commit a183604
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/public/aiko.jpeg b/public/aiko.jpeg
diff --git a/src/components/example/CardExample.tsx b/src/components/example/CardExample.tsx
@@ -5,9 +5,12 @@ 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/neobruu/Card.tsx b/src/components/neobruu/Card.tsx
@@ -27,13 +27,13 @@ function Card({ rounded = 'none', children }: CardProps) {
 
 Card.Header = function CardHeader({ imageUrl }: CardHeaderProps) {
     return (
-        <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">
+        <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"
-                        className="w-full h-full object-cover"
+                        fill={true}
                     />
                 </figure>
             </article>
@@ -50,7 +50,7 @@ Card.Footer = function CardFooter({ children }: CardFooterProps) {
 
 Card.Body = function CardBody({ children }: CardBodyProps) {
     return (
-        <div className="px-6 py-5 text-left h-full">
+        <div className="px-6 py-5 text-justify h-full">
             {children}
         </div>
     );

diff --git a/src/data/components.ts b/src/data/components.ts
@@ -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,