estilos card cardapio + cardapio

andre-brandao · Aug 5, 2024 · d8fb9bc · d8fb9bc
1 parent f77f9ed
commit d8fb9bc
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 42 deletions.
diff --git a/src/lib/components/cards/Card1.svelte b/src/lib/components/cards/Card1.svelte
@@ -3,13 +3,11 @@
     nome: string
     descricao: string
     image?: string
+    preco: string
   }
 
-  let categorias = [
-    { nome: 'Latao' },
-    { nome: 'Teste' },
-  ]
-  let { nome, descricao, image }: CardProps = $props()
+  let categorias = [{ nome: 'Latao' }, { nome: 'Teste' }]
+  let { nome, descricao, image, preco }: CardProps = $props()
 </script>
 
 <button
@@ -27,7 +25,9 @@
   <div class="card-body">
     <h2 class="card-title flex justify-center">
       {nome}
-      <div class="badge badge-secondary">NEW</div>
+      <div class="badge badge-primary items-center p-4">
+        <p class="text-center text-xl">R${preco}</p>
+      </div>
     </h2>
     <p class="text-sm">Descricão: {descricao}</p>
     <div class="card-actions justify-center">

diff --git a/src/routes/products/+page.svelte b/src/routes/products/+page.svelte
@@ -16,6 +16,7 @@
         nome={c.name}
         descricao={c.description}
         image={getImagePath(c.image)}
+        preco={'TODO'}
       />
     </a>
   {/snippet}

diff --git a/src/routes/products/[id]/+page.svelte b/src/routes/products/[id]/+page.svelte
@@ -28,40 +28,39 @@
 
 <section class="body-font overflow-hidden">
   <div class="container mx-auto px-5 py-24">
-    <div class="mx-auto flex flex-wrap-reverse lg:w-4/5">
+    <div class="mx-auto flex flex-wrap-reverse justify-between gap-3 lg:w-4/5">
       <div class="mb-6 w-full lg:mb-0 lg:w-1/2 lg:py-6 lg:pr-10">
         <button onclick={() => history.back()} class="btn btn-primary mb-3">
           {@html icons.arrows.left_line()} Back
         </button>
         <h2 class="title-font text-sm tracking-widest">
           {produto.category?.name}
         </h2>
-        <h1 class="title-font mb-4 text-3xl font-medium">
+        <h1 class="title-font mt-1 text-3xl font-bold">
           {produto.name}
         </h1>
-        <div class="mb-4 flex">
-          <a
+        <!-- <div class="mb-4 flex">
+          <button
             class="flex-grow border-b-2 border-indigo-500 px-1 py-2 text-lg text-indigo-500"
           >
             Description
-          </a>
-          <a class="flex-grow border-b-2 border-gray-300 px-1 py-2 text-lg">
+          </button>
+          <button class="flex-grow border-b-2 border-gray-300 px-1 py-2 text-lg">
             Reviews
-          </a>
-          <a class="flex-grow border-b-2 border-gray-300 px-1 py-2 text-lg">
+          </button>
+          <button class="flex-grow border-b-2 border-gray-300 px-1 py-2 text-lg">
             Details
-          </a>
-        </div>
+          </button>
+        </div> -->
         <p class="mb-4 leading-relaxed">
-          {produto.description}
+          Description: {produto.description}
         </p>
 
         <div class="flex gap-3 border-t border-gray-200 py-2">
           {#each produto.items as variant, i (variant)}
             <!-- TODO: improve minicard -->
             <button
-              class="btn"
-              class:btn-active={activeItemIndex === i}
+              class="btn {activeItemIndex === i ? 'btn-primary' : ''}"
               value={i}
               onclick={() => (activeItemIndex = i)}
             >
@@ -70,42 +69,44 @@
           {/each}
         </div>
 
-        <div class="mb-6 flex border-b border-t border-gray-200 py-2">
+        <div
+          class="mb-6 flex items-center border-b border-t border-gray-200 py-2"
+        >
           <span class="">Quantity</span>
           <span class="ml-auto">
             <button class="btn btn-primary" onclick={decrement}>-</button>
             <span class="mx-2">{quantity}</span>
             <button class="btn btn-primary" onclick={increment}>+</button>
           </span>
         </div>
-        <div class="flex">
-          <span class="title-font text-2xl font-medium">
-            ${9}
+        <div class="flex items-center justify-between">
+          <span class="title-font text-2xl font-bold">
+            ${'TODO'}
           </span>
-          <button class="btn btn-primary ml-auto flex">
-            Adicionar Carrinho
-          </button>
-          <button
-            class="ml-4 inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-gray-200 p-0"
-          >
-            <svg
-              fill="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              class="h-5 w-5"
-              viewBox="0 0 24 24"
+          <div class="flex items-center gap-4">
+            <button
+              class="inline-flex h-10 w-10 items-center justify-center rounded-full border-0 bg-gray-200 p-0"
             >
-              <path
-                d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
-              ></path>
-            </svg>
-          </button>
+              <svg
+                fill="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                class="h-5 w-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+                ></path>
+              </svg>
+            </button>
+            <button class="btn btn-primary flex">Add to cart</button>
+          </div>
         </div>
       </div>
       <img
         alt="ecommerce"
-        class="h-64 w-full rounded object-cover object-center lg:h-auto lg:w-1/2"
+        class="h-64 w-full rounded object-cover object-center lg:h-auto lg:w-1/3"
         src={getImagePath(
           produto.items[activeItemIndex].image ?? produto.image,
         )}