Add card from merakiui (#56)

* add article * add article with icons * add articleWithImage and change avatar path * add product * add product with evaluation * add user with details
willpinha · Jan 17, 2024 · 39f28bc · 39f28bc
1 parent 3313eae
commit 39f28bc
Show file tree

Hide file tree

Showing 16 changed files with 221 additions and 26 deletions.
diff --git a/public/images/avatar.png → public/avatar.png b/public/images/avatar.png → public/avatar.png
diff --git a/public/backgrounds/forest.jpg b/public/backgrounds/forest.jpg
diff --git a/src/examples/card/article.html b/src/examples/card/article.html
@@ -0,0 +1,33 @@
+<!-- Card -->
+<div class="flex flex-col gap-6 bg-base-200 rounded-box p-6 max-w-xl">
+    <!-- Header -->
+    <div class="flex justify-between items-center">
+        <span class="text-sm">Jan 10, 2024</span>
+
+        <a class="btn btn-sm btn-primary">Design</a>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col gap-2">
+        <a class="text-xl font-bold link">
+            Accessibility tools for designers and developers
+        </a>
+
+        <span>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam
+            aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus
+            delectus nihil quis facere in modi ratione libero!
+        </span>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex justify-between items-center">
+        <a class="link link-accent">Read more</a>
+
+        <a class="btn btn-ghost">
+            <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
+
+            User name
+        </a>
+    </div>
+</div>
diff --git a/src/examples/card/articleWithIcons.html b/src/examples/card/articleWithIcons.html
@@ -0,0 +1,43 @@
+<!-- Card -->
+<div class="flex flex-col gap-6 bg-base-200 rounded-box p-6 max-w-xl">
+    <!-- Header --> 
+    <div class="flex justify-between items-center">
+        <span class="text-sm">
+            Courses and MOOCs
+        </span>
+
+        <span class="badge badge-primary badge-lg">Psychology</span>
+    </div>
+
+    <!-- Body --> 
+    <div class="flex flex-col gap-2">
+        <h1 class="font-bold text-xl">Psychology - Course 5: Health and Behavior</h1>
+
+        <span>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique
+            exercitationem optio libero vitae accusamus cupiditate laborum eos
+        </span>
+
+        <span class="text-sm">
+            Visit on
+            <a class="link link-accent">edx.org</a>
+            or
+            <a class="link link-accent">classcentral.com</a>
+        </span>
+    </div>
+
+    <!-- Footer --> 
+    <div class="flex gap-2">
+        <a class="btn btn-ghost btn-circle btn-sm text-lg">
+            <i class="fa-brands fa-twitter"></i>
+        </a>
+
+        <a class="btn btn-ghost btn-circle btn-sm text-lg">
+            <i class="fa-brands fa-facebook"></i>
+        </a>
+
+        <a class="btn btn-ghost btn-circle btn-sm text-lg">
+            <i class="fa-solid fa-link"></i>
+        </a>
+    </div>
+</div>
diff --git a/src/examples/card/articleWithImage.html b/src/examples/card/articleWithImage.html
@@ -0,0 +1,28 @@
+<!-- Card -->
+<div class="flex flex-col bg-base-200 rounded-box max-w-xl">
+    <!-- Image -->
+    <div class="bg-[url('/backgrounds/forest.jpg')] bg-center rounded-t-box w-full h-72"></div>
+
+    <!-- Body-->
+    <div class="flex flex-col gap-6 p-6">
+        <h3 class="text-secondary font-medium">Product</h3>
+
+        <a class="link link-hover text-xl font-bold">I Built A Successful Blog In One Year</a>
+
+        <span>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem
+            ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In
+            pretium nec senectus erat. Et malesuada lobortis
+        </span>
+
+        <div class="flex gap-2 justify-between items-center">
+            <div class="flex items-center gap-2">
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
+
+                <span class="link link-accent font-medium text-sm">User Name</span>
+            </div>
+
+            <span class="text-sm">Jan 10 2024</span>
+        </div>
+    </div>
+</div>
diff --git a/src/examples/card/product.html b/src/examples/card/product.html
@@ -0,0 +1,22 @@
+<!-- Card -->
+<div class="flex flex-col max-w-sm">
+    <!-- Content -->
+    <div class="flex flex-col gap-2 p-4 bg-base-200 rounded-t-box">
+        <h1 class="font-bold text-xl">Nike air</h1>
+
+        <span>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum
+            facere recusandae voluptatibus
+        </span>
+    </div>
+
+    <!-- Image -->
+    <div class="bg-[url('/backgrounds/forest.jpg')] bg-center w-full h-60"></div>
+
+    <!-- Buttom -->
+    <div class="flex justify-between bg-neutral text-neutral-content p-4 rounded-b-box">
+        <span class="font-bold text-xl">$129</span>
+
+        <a class="btn btn-primary btn-sm">Add to cart</a>
+    </div>
+</div>
diff --git a/src/examples/card/productWithEvaluation.html b/src/examples/card/productWithEvaluation.html
@@ -0,0 +1,29 @@
+<!-- Card -->
+<div class="flex max-w-lg">
+    <!-- Image -->
+    <div class="bg-[url('/backgrounds/forest.jpg')] bg-center rounded-l-box w-48"></div>
+
+    <!-- Content -->
+    <div class="flex flex-col gap-4 p-6 bg-base-200 rounded-r-box">
+        <h1 class="font-bold text-xl">Backpack</h1>
+
+        <span>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit In odit
+        </span>
+
+        <!-- Stars -->
+        <div class="flex gap-2 text-accent">
+            <i class="fa-solid fa-star"></i>
+            <i class="fa-solid fa-star"></i>
+            <i class="fa-solid fa-star"></i>
+            <i class="fa-regular fa-star"></i>
+            <i class="fa-regular fa-star"></i>
+        </div>
+
+        <div class="flex justify-between items-center">
+            <span class="font-medium text-2xl">$220</span>
+
+            <a class="btn btn-primary btn-sm">Add to cart</a>
+        </div>
+    </div>
+</div>
diff --git a/src/examples/card/userWithDetails.html b/src/examples/card/userWithDetails.html
@@ -0,0 +1,40 @@
+<!-- Card -->
+<div class="flex flex-col max-w-sm">
+    <!-- Image -->
+    <div class="bg-[url('/backgrounds/forest.jpg')] bg-center rounded-t-box h-72"></div>
+
+    <!-- Status -->
+    <div class="flex items-center gap-4 bg-neutral text-neutral-content py-4 px-6 font-bold text-lg">
+        <i class="fa-solid fa-headphones-simple"></i>
+        Focusing
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-col gap-6 bg-base-200 p-6 rounded-b-box">
+        <h1 class="font-bold text-xl">
+            Patterson johnson
+        </h1>
+
+        <span>
+            Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI
+        </span>
+
+        <!-- Icons -->
+        <div class="flex flex-col gap-2">
+            <div class="flex gap-3 items-center text-sm">
+                <i class="fa-solid fa-briefcase text-accent"></i>
+                Daisy Collection
+            </div>
+
+            <div class="flex gap-3 items-center text-sm">
+                <i class="fa-solid fa-location-dot text-accent"></i>
+                California
+            </div>
+
+            <div class="flex gap-3 items-center text-sm">
+                <i class="fa-solid fa-envelope text-accent"></i>
+                [email protected]
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/examples/dropdown/notification.html b/src/examples/dropdown/notification.html
@@ -6,7 +6,7 @@
     <ul tabindex="0" class="dropdown-content z-[1] menu shadow bg-base-200 rounded-box w-80 gap-2">
         <li>
             <a class="flex items-start">
-                <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
 
                 <div class="flex flex-col gap-2">
                     <span class="text-wrap">
@@ -22,7 +22,7 @@
         </li>
         <li>
             <a class="flex items-start">
-                <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
 
                 <div class="flex flex-col gap-2">
                     <span class="text-wrap">
@@ -36,7 +36,7 @@
         </li>
         <li>
             <a class="flex items-start">
-                <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
 
                 <div class="flex flex-col gap-2">
                     <span class="text-wrap">

diff --git a/src/examples/dropdown/user.html b/src/examples/dropdown/user.html
@@ -7,7 +7,7 @@
     <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
         <li>
             <a class="flex" title="View profile">
-                <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
 
                 <div class="flex flex-col">
                     <h3 class="font-bold">User name</h3>

diff --git a/src/examples/dropdown/userWithIcons.html b/src/examples/dropdown/userWithIcons.html
@@ -7,7 +7,7 @@
     <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
         <li>
             <a class="flex" title="View profile">
-                <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
 
                 <div class="flex flex-col">
                     <h3 class="font-bold">User name</h3>

diff --git a/src/examples/sidebar/avatar.html b/src/examples/sidebar/avatar.html
@@ -5,7 +5,7 @@
         Company Name
     </a>
 
-    <img alt="Profile" src="/images/avatar.png" class="w-32 rounded-full"/>
+    <img alt="Profile" src="/avatar.png" class="w-32 rounded-full"/>
 
     <h2 class="font-bold text-lg">User name</h2>
 

diff --git a/src/examples/sidebar/iconsOnly.html b/src/examples/sidebar/iconsOnly.html
@@ -63,7 +63,7 @@
         <div class="divider my-0"></div>
 
         <a class="btn btn-circle btn-ghost text-xl" title="Profile">
-            <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+            <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
         </a>
     </aside>
 </div>
diff --git a/src/examples/sidebar/menuAndSearch.html b/src/examples/sidebar/menuAndSearch.html
@@ -106,7 +106,7 @@
         <!-- Footer -->
         <div class="flex justify-between items-center p-2">
             <a class="btn">
-                <img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
+                <img alt="Profile" src="/avatar.png" class="w-8 rounded-full" />
 
                 <div class="flex flex-col text-start">
                     <span class="font-bold">User name</span>

diff --git a/src/examples/sidebar/submenu.html b/src/examples/sidebar/submenu.html
@@ -38,7 +38,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
         <ul class="menu px-0">
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -48,7 +48,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -58,7 +58,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -68,7 +68,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -78,7 +78,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -88,7 +88,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -98,7 +98,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -108,7 +108,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -118,7 +118,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -128,7 +128,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -138,7 +138,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>
@@ -148,7 +148,7 @@ <h1 class="font-bold text-xl">Accounts</h1>
             </li>
             <li>
                 <a>
-                    <img alt="User" src="/images/avatar.png" class="rounded-full w-8" />
+                    <img alt="User" src="/avatar.png" class="rounded-full w-8" />
 
                     <div class="flex flex-col">
                         <span class="font-bold">User name</span>