Merge pull request #2 from brenin35/main

andre-brandao · Aug 5, 2024 · ac0ab48 · ac0ab48
2 parents ac34ba3 + f77f9ed
commit ac0ab48
Show file tree

Hide file tree

Showing 19 changed files with 127 additions and 65 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,4 +19,7 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-*.db
+*.db
+
+# Lockfiles
+pnpm-lock.yaml
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tiny5&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -9,3 +11,7 @@
     animation: none !important;
   }
 }
+
+* {
+  font-family: 'Poppins', Helvetica, sans-serif;
+}
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
+<html lang="%paraglide.lang%" dir="%paraglide.textDirection%" data-theme="bumblebee">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/src/lib/assets/home/logo-duarte.jpg b/src/lib/assets/home/logo-duarte.jpg
diff --git a/src/lib/components/Cardapio.svelte b/src/lib/components/Cardapio.svelte
@@ -93,15 +93,15 @@
 <main class="mx-1">
   <div class="sticky top-1 z-10 mx-2 pt-2">
     <div
-      class="hide-scrollbar flex w-full gap-3 overflow-y-hidden overflow-x-scroll rounded-box bg-base-100 p-2 shadow-xl"
+      class="hide-scrollbar flex w-full gap-3 overflow-y-hidden overflow-x-scroll rounded-box bg-base-200 p-2 shadow-xl"
       bind:this={scrollContainer}
     >
       {#each data as d}
         <a
           id="head-{d}"
-          class="btn hover:-translate-x-1 hover:translate-y-1 {selected === d.id
-            ? 'btn-primary'
-            : ''}"
+          class="btn hover:translate-y-0.5 {selected === d.id
+            ? 'bg-primary'
+            : 'bg-base-100'}"
           href="#{d.id}"
           onclick={scrollIntoView}
         >

diff --git a/src/lib/components/cards/Card1.svelte b/src/lib/components/cards/Card1.svelte
@@ -4,6 +4,11 @@
     descricao: string
     image?: string
   }
+
+  let categorias = [
+    { nome: 'Latao' },
+    { nome: 'Teste' },
+  ]
   let { nome, descricao, image }: CardProps = $props()
 </script>
 
@@ -16,18 +21,19 @@
         ? image
         : 'https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'}
       loading="lazy"
-      alt="Shoes"
+      alt={nome}
     />
   </figure>
   <div class="card-body">
-    <h2 class="card-title">
+    <h2 class="card-title flex justify-center">
       {nome}
       <div class="badge badge-secondary">NEW</div>
     </h2>
-    <p>{descricao}</p>
-    <div class="card-actions justify-end">
-      <div class="badge badge-outline">Fashion</div>
-      <div class="badge badge-outline">Products</div>
+    <p class="text-sm">Descricão: {descricao}</p>
+    <div class="card-actions justify-center">
+      {#each categorias as categoria}
+        <div class="badge badge-outline">{categoria.nome}</div>
+      {/each}
     </div>
   </div>
 </button>
diff --git a/src/lib/components/dnd/DnDBoard.svelte b/src/lib/components/dnd/DnDBoard.svelte
@@ -86,7 +86,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    height: 90vh;
+    height: 80vh;
     width: 100%;
     padding: 0.5em;
   }
@@ -103,7 +103,7 @@
     visibility: visible;
     border: 1px dashed grey;
     background: lightblue;
-    opacity: 0.35;
+    opacity: 0.30;
     margin: 0;
   }
 </style>
diff --git a/src/lib/components/input/ImageInput.svelte b/src/lib/components/input/ImageInput.svelte
@@ -49,7 +49,7 @@
 </script>
 
 <div class="image-container object-cover">
-  <img width="100" height="100" src={getImagePath(image_id)} alt="" />
+  <img width="100" height="100" src={getImagePath(image_id)} alt="" class="rounded-lg" />
 
   <input
     id="file-input"

diff --git a/src/lib/components/landing-page/hero/HeroDuarte.svelte b/src/lib/components/landing-page/hero/HeroDuarte.svelte
@@ -0,0 +1,20 @@
+<script>
+    let logo = 'src/lib/assets/home/logo-duarte.jpg'
+</script>
+
+<div class="flex min-h-[80vh] flex-col items-center justify-center">
+	<img src={logo} alt="Logo" class="mb-3 max-h-60 max-w-60" />
+	<h1 class="mb-4 text-4xl font-bold text-center">Bem-vindo ao Sistema do Duarte</h1>
+	<div class="flex flex-col lg:flex-row gap-4">
+		<a
+			href="/"
+			class="rounded-lg bg-primary px-6 py-2 hover:bg-opacity-75 text-center transition"
+			>Faça seu pedido!</a
+		>
+		<a
+			href="/admin"
+			class="rounded-lg bg-primary px-6 py-2 hover:bg-opacity-75 text-center transition"
+			>Administrador? Faça o Login</a
+		>
+	</div>
+</div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -1,9 +1,9 @@
 // place files you want to import through the `$lib` alias in this folder.
 export const themes = [
+  'bumblebee',
   'light',
   'dark',
   'cupcake',
-  'bumblebee',
   'emerald',
   'corporate',
   'synthwave',

diff --git a/src/lib/server/email.ts b/src/lib/server/email.ts
@@ -188,17 +188,21 @@ export const emailTemplate = {
                 text-align: center;
                 font-size: 12px;
               }
-               .text-blu {
-        color: #007bff;
-      }
-      .quadrado {
-        background-color: #007bff;
-        border-radius: 10px;
-      }
-      .white {
-        color: white;
-      }
-                
+              .code {
+                text-align: center;
+                font-size: 30px;
+                padding-bottom: 0px;
+              }
+              .text-blu {
+                color: #007bff;
+              }
+              .quadrado {
+                background-color: #007bff;
+                border-radius: 10px;
+              }
+              .white {
+                color: white;
+              }
             </style>
           </head>
           <body>

diff --git a/src/lib/utils/icons.ts b/src/lib/utils/icons.ts
@@ -150,6 +150,16 @@ export const icons = {
       <path d="M12 17h.01" />`,
       cfg,
     ),
+  trash: (cfg?: SVGoptions) =>
+    svgTemplate(
+      `
+<path d="M3 6h18" />
+  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+  <line x1="10" x2="10" y1="11" y2="17" />
+  <line x1="14" x2="14" y1="11" y2="17" />`,
+      cfg,
+    ),
 
   flags: {
     getEmojiFlag: (lang: string) => {

diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -2,5 +2,5 @@ import type { LayoutServerLoad } from './$types'
 
 export const load = (async ({ locals, url }) => {
   const { session, user } = locals
-  return { session, user, transition_key: url.pathname }
+  return { session, user, url: url.pathname }
 }) satisfies LayoutServerLoad
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -15,7 +15,6 @@
   import { ModalContainer } from '$lib/components/modal'
   import DrawerContainer from '$lib/components/drawer/base/DrawerContainer.svelte'
   import Transition from './Transition.svelte'
-
   import type { LayoutData } from './$types'
 
   export let data: LayoutData
@@ -24,7 +23,7 @@
   $: user.set(data.user)
 
   onMount(() => {
-    changeTheme('retro')
+    changeTheme('bumblebee')
   })
 </script>
 
@@ -33,7 +32,7 @@
   <!-- <DrawerContainer> -->
   <NavBar>
     <ModalContainer />
-    <Transition key={data.transition_key}>
+    <Transition {data}>
       <slot />
     </Transition>
   </NavBar>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,7 +9,7 @@
   import Footer from '$lib/components/landing-page/Footer.svelte'
 
   import ShareButton from '$components/share/index.svelte'
-  import HeroGlobe from '$lib/components/landing-page/hero/HeroGlobe.svelte'
+  import HeroDuarte from '$lib/components/landing-page/hero/HeroDuarte.svelte'
 </script>
 
 <SEO
@@ -27,7 +27,7 @@
 
 <!-- <Modal onClose={console.log} onOpen={console.log}>Teste Modal</Modal> -->
 <main class="flex flex-col gap-5 overflow-auto">
-  <HeroGlobe />
+  <HeroDuarte />
 
   <!-- <div class="h-60 w-60">
     <RotatingGlobe></RotatingGlobe>
@@ -36,7 +36,7 @@
 
   <!-- <MapContact /> -->
 
-  <Features3></Features3>
+  <!-- <Features3></Features3>
 
   <Pricing />
 
@@ -46,5 +46,5 @@
 
   <Carousel2 />
 
-  <Footer></Footer>
+  <Footer></Footer> -->
 </main>
diff --git a/src/routes/Transition.svelte b/src/routes/Transition.svelte
@@ -6,7 +6,7 @@
   import { onNavigate } from '$app/navigation'
   import PreLoadingIndicator from './PreLoadingIndicator.svelte'
 
-  export let key
+  export let data
 
   onNavigate(navigation => {
     // @ts-expect-error
@@ -24,11 +24,17 @@
 
 <!-- TODO: fix duplicating page bug -->
 <!-- or $navigating -->
-{#key key}
+{#key data.url}
   <div
-    class="h-full overflow-scroll overflow-x-auto transition-all"
-    in:fly={{ delay: 300, duration: 300, easing: cubicOut, x: 0, y: 240 }}
-    out:fly={{ duration: 300, easing: cubicIn, x: 0, y: -240 }}
+    in:fly={{
+      duration: 300,
+      x: 0,
+      y: 240,
+      easing: cubicOut,
+      delay: 2000,
+    }}
+    out:fly={{ duration: 300, x: 0, y: -240, easing: cubicIn }}
+    class="h-full overflow-scroll overflow-x-auto"
   >
     <slot />
   </div>

diff --git a/src/routes/admin/products/+page.svelte b/src/routes/admin/products/+page.svelte
@@ -5,6 +5,7 @@
   import { trpc } from '$trpc/client'
   import { page } from '$app/stores'
   import { invalidate } from '$app/navigation'
+  import { icons } from '$lib/utils/icons'
 
   export let data: PageData
 
@@ -105,7 +106,7 @@
   }
 </script>
 
-<div class="mx-auto flex items-center justify-center ">
+<div class="mx-auto flex items-center justify-center gap-3">
   <p>Produtos</p>
   <button class="btn btn-primary" onclick={handleAddCategory}>
     Add Category
@@ -121,7 +122,7 @@
   }}
 >
   {#snippet collum(cat)}
-    <div class="flex items-center  justify-between gap-4">
+    <div class="flex items-center justify-between gap-4">
       <p>
         {cat.name}
       </p>
@@ -134,12 +135,17 @@
     </div>
   {/snippet}
   {#snippet card(p)}
-    <a
-      href="/admin/products/{p.id}"
-      class="flex w-full flex-col gap-2 bg-base-300 text-center"
-    >
-      <p>{p.name}</p>
-      <p>{p.description}</p>
-    </a>
+    <div class="flex w-full gap-0 rounded-lg bg-base-300 text-center">
+      <a href="/admin/products/{p.id}" class="w-5/6 px-4 py-3">
+        <p class="text-xl font-bold">{p.name}</p>
+        <p class="font-light">{p.description}</p>
+      </a>
+
+      <button
+        class="absolute right-4 top-4 flex h-12 w-12 items-center justify-center rounded-full border-2 border-red-500 bg-opacity-0 hover:cursor-pointer"
+      >
+        {@html icons.trash({ stroke: 'red' })}
+      </button>
+    </div>
   {/snippet}
 </DnDBoard>
diff --git a/src/routes/admin/products/[id]/+page.svelte b/src/routes/admin/products/[id]/+page.svelte
@@ -82,23 +82,23 @@
 
 <main class="container mx-auto flex flex-col">
   <div
-    class="card flex flex-row items-center justify-between bg-surface-300 p-2"
+    class="card flex flex-row items-center justify-between bg-surface-200 p-2"
   >
     <ImageInput
       name={produto.name}
       image_id={produto.image}
       save={updateProductImage}
     />
     <div>
-      <h2 class="title-font text-sm tracking-widest text-gray-500">
+      <h2 class="title-font text-md tracking-widest text-gray-600 text-center">
         {produto.category?.name}
       </h2>
-      <h1 class="title-font mb-1 text-3xl font-medium text-gray-900">
+      <h1 class="mb-1 text-3xl font-bold text-gray-900 text-center">
         {produto.name}
       </h1>
-      <p class="leading-relaxed">{produto.description}</p>
+      <p class="leading-relaxed font-light text-sm text-center">Descricão: {produto.description}</p>
     </div>
-    <button class="btn btn-primary" onclick={handleAddItem}>+ Add Item</button>
+    <button class="btn btn-primary px-5" onclick={handleAddItem}>+ Add Item</button>
   </div>
 
   <div class="mt-3 flex flex-wrap gap-4">