Merge pull request #17 from sergio222-dev/develop

new responsive design layout

database.types.ts

@@ -194,6 +194,36 @@ export type Database = {
           },
         ]
       }
+      users_likes: {
+        Row: {
+          deck_id: number
+          user_id: string
+        }
+        Insert: {
+          deck_id: number
+          user_id: string
+        }
+        Update: {
+          deck_id?: number
+          user_id?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "users_likes_deck_id_fkey"
+            columns: ["deck_id"]
+            isOneToOne: false
+            referencedRelation: "decks"
+            referencedColumns: ["id"]
+          },
+          {
+            foreignKeyName: "users_likes_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: false
+            referencedRelation: "users"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
     }
     Views: {
       card_rarity: {

src/components/deckCard/DeckCard.tsx

@@ -1,15 +1,17 @@
 import { component$ }          from "@builder.io/qwik";
 import { Link }                from "@builder.io/qwik-city";
+import { Icon }                from "~/components/icons/Icon";
 import { createClientBrowser } from "~/lib/supabase-qwik";
 
 interface DeckCardProps {
   id: number;
   splashArt?: string;
   name: string;
   path?: string;
+  likes?: number;
 }
 
-export const DeckCard = component$<DeckCardProps>(({ id, splashArt, name, path = '/decks/preview' }) => {
+export const DeckCard = component$<DeckCardProps>(({ id, splashArt, likes = 0, name, path = '/decks/preview' }) => {
   const supabase = createClientBrowser();
 
   return (
@@ -30,13 +32,13 @@ export const DeckCard = component$<DeckCardProps>(({ id, splashArt, name, path =
           }
         } : {})}
       >
-        <div class="font-bold">
-          {name}
+        <div>
+          <p class="font-bold sm:text-3xl text-[calc(1.5rem+2vmin)]">{name}</p>
         </div>
-        <div class="hidden mt-auto justify-between">
-          <p>
-            {/*{d.description}*/}
-          </p>
+        <div class="mt-auto justify-between text-white  w-full">
+          <div class="flex items-center gap-2 justify-end">
+            <Icon class="cursor-pointer fill-white" name="heart" width={16} height={16} /> {likes}
+          </div>
         </div>
       </div>
     </Link>

src/components/filterField/FilterField.tsx

@@ -11,7 +11,7 @@ interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
 
 export const ChipFilter = component$<FilterChipProps>(({ ...props }) => {
   return (
-    <Chip class="flex gap-1 hover:bg-red-500 cursor-pointer px-3 py-2 text-white text-sm" {...props}>
+    <Chip class="flex gap-1 hover:bg-red-500 cursor-pointer px-3 py-1 text-white text-sm" {...props}>
       <ButtonIcon class="bg-transparent">
         <Icon name={'close'} width={8} height={8}/>
       </ButtonIcon>
@@ -49,18 +49,19 @@ export const FilterField = component$<FilterFieldProps>(
     })
 
     return (
-      <div class="relative w-full rounded-3xl p-2 ring-primary ring-4 focus-within:ring-secondary flex gap-2 flex-wrap">
+      <div class="relative items-center w-full rounded-3xl px-4 h-[40px] ring-primary ring-4 focus-within:ring-secondary flex gap-2 flex-wrap">
         <Slot/>
         <form
           ref={r}
-          class="w-full flex-1 min-w-[200px] items-center flex"
+          class="w-full flex-1 items-center flex"
           onSubmit$={handleSubmit}
           preventdefault:submit>
           <input
             name="contains"
             autocomplete="off"
             class="focus:outline-none flex-1 w-full"
             type="text"
+            placeholder="Type to filter..."
             onKeyDown$={handleClear}
           />
         </form>

src/components/icons/Icon.tsx

@@ -20,10 +20,16 @@ const ICONS: Record<IconName, (props: SVGProps<SVGElement>) => JSXOutput> = {
       <path
         d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/>
     </svg>
+  ),
+  'heart': (props: SVGProps<SVGElement>) => (
+    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8l0-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5l0 3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20-.1-.1s0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5l0 3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2l0-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/>
+    </svg>
   )
 }
 
-type IconName = 'art' | 'close' | 'menu';
+type IconName = 'art' | 'close' | 'menu' | 'heart';
 
 interface IconProps extends SVGProps<SVGElement> {
   name: IconName;

src/features/appbar/Appbar.tsx

@@ -11,8 +11,8 @@ export const Appbar = component$(() => {
 
   return (
     <>
-      <header class="p-4 bg-primary text-white">
-        <div class="container mx-auto flex justify-between h-16 items-center">
+      <header class="fixed top-0 w-full z-10 p-4 bg-primary text-white">
+        <div class="flex justify-between h-16 items-center">
           <div class="flex items-center">
             <Link rel="noopener noreferrer" href="/" aria-label="Back to homepage" class="flex items-center p-2">
               <h2 class="font-bold text-2xl">LDB</h2>

src/features/cards/components/CardFilter.tsx

@@ -149,8 +149,8 @@ export const CardFilter = component$(() => {
 
   // Render
   return (
-    <div class="">
-      <div class="flex w-full gap-2">
+    <div>
+      <div class="flex items-center w-full gap-2">
         <FilterField onSubmit={addContainsFilter} onClear={handleClearLastFilter}>
           {c.filters.map(f => (
             <ChipFilter key={f.id} onClick$={() => c.removeFilter(f.id)}>{f.label}</ChipFilter>

src/features/cards/components/Pagination.tsx

@@ -16,8 +16,8 @@ export const Pagination = component$(() => {
 
   return (
     <div>
-      <div class="flex items-center justify-between border-t border-gray-200 bg-white py-2">
-        <div class="flex flex-1 justify-between sm:hidden">
+      <div class="flex items-center justify-between bg-white py-2">
+        <div class="flex flex-1 justify-between lg:hidden">
           <a
             href="#"
             class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
@@ -31,7 +31,7 @@ export const Pagination = component$(() => {
             Next
           </a>
         </div>
-        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-between">
           <div class="px-2">
             <p class="text-sm text-gray-400">
               Showing {(c.page - 1) * c.size + 1} to {!isLastPage.value ? c.page * c.size : c.count} results
@@ -99,9 +99,9 @@ export const Pagination = component$(() => {
               ))}
               {/* <a href="#" aria-current="page" class="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">1</a>
                <a href               = "#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">2</a>
-               <a href               = "#" class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex">3</a>
+               <a href               = "#" class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 lg:inline-flex">3</a>
                <span class           = "relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">...</span>
-               <a href               = "#" class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex">8</a>
+               <a href               = "#" class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 lg:inline-flex">8</a>
                <a href               = "#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">9</a>
                <a href               = "#" class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0">10</a> */}
               <a

src/features/createDeck/Create.tsx

@@ -1,5 +1,5 @@
-import { $, component$, useContextProvider, useSignal } from '@builder.io/qwik';
-import { useLocation, useNavigate }                     from "@builder.io/qwik-city";
+import { component$, useContextProvider, useSignal } from '@builder.io/qwik';
+import { Button }                                    from "~/components/button";
 
 import { CardFilter }                                from '~/features/cards';
 import { CardDeckInfo }                              from '~/features/createDeck/components/CardDeckInfo';
@@ -11,9 +11,7 @@ import { DeckCreationContext, useDeckCreationStore } from '~/stores/deckCreation
 import { FilterContext, useFilterStore }             from '~/stores/filterContext';
 
 export const Create = component$(() => {
-  const buttonDisabled = useSignal(false);
-  const location       = useLocation();
-  const navigation     = useNavigate();
+  const selectedSection = useSignal(0);
 
   const preloadedCards = useCardDeckLoader();
   const preloadedDeck  = useDeckLoader();
@@ -25,26 +23,27 @@ export const Create = component$(() => {
   useContextProvider(DeckCreationContext, deckStore);
 
   return (
-    <div>
-
-      <CreateForm/>
-      <CardFilter/>
-      <CardListDeck/>
-      <CardDeckInfo/>
-      <button
-        class="hover:bg-pink-800 bg-white opacity-50 hover:opacity-100 hover:text-white ring-2 ring-pink-800 fixed bottom-[1%] right-[1%] p-4 disabled:opacity-50 disabled:cursor-not-allowed"
-        disabled={buttonDisabled.value}
-        onClick$={$(async () => {
-          buttonDisabled.value = true;
-          const result         = await deckStore.createDeck();
-          buttonDisabled.value = false;
-
-          if (location.params['id'] === '' && result > 0) {
-            void navigation(`/decks/create/${result}`);
-          }
-        })}
-      >CREATE/UPDATE
-      </button>
+    <div class="h-full flex flex-col md:flex-row">
+      {/*<div hidden={selectedSection.value !== 0} class="p-2 md:block md:col-span-4 md:row-span-1">*/}
+      {/*</div>*/}
+      <div hidden={selectedSection.value !== 0} class="h-full overflow-y-auto md:flex-1 md:block ">
+        <CardFilter/>
+        <CardListDeck/>
+      </div>
+      <div hidden={selectedSection.value !== 1} class="h-full overflow-y-auto md:flex-1 md:block">
+        <div class="">
+          <CreateForm/>
+        </div>
+        <CardDeckInfo/>
+      </div>
+      <div class="flex items-stretch flex-1 md:hidden">
+        <div class="flex-1 p-4 bg-primary">
+          <Button onClick$={() => selectedSection.value = 0} class="w-full h-full">Cartas</Button>
+        </div>
+        <div class="flex-1 p-4 bg-primary">
+          <Button onClick$={() => selectedSection.value = 1} class="w-full h-full">Deck</Button>
+        </div>
+      </div>
     </div>
   );
 });