Test Layout

Nikos-Stuff · Dec 9, 2024 · 42e8ae3 · 42e8ae3
1 parent 8b97ad1
commit 42e8ae3
Show file tree

Hide file tree

Showing 16 changed files with 471 additions and 131 deletions.
diff --git a/src/components/ArrowCard.tsx b/src/components/ArrowCard.tsx
@@ -5,6 +5,7 @@ type Props = {
   entry:
     | CollectionEntry<"blog">
     | CollectionEntry<"events">
+    | CollectionEntry<"products">
   pill?: boolean;
 };
 
@@ -15,6 +16,8 @@ export default function ArrowCard({ entry, pill }: Props) {
         return `/blog/${entry.id}`;
       case "events":
         return `/events/${entry.id}`;
+      case "products":
+          return `/products/${entry.id}`;
       default:
         return "/";
     }
@@ -92,6 +95,30 @@ export default function ArrowCard({ entry, pill }: Props) {
             />
           </svg>
         </a>
+      ) : entry.collection === "products" ? (
+        // Products cart design
+        <a
+        href={getEntryLink()}
+        class="group  p-2 flex flex-col items-center border border-dashed rounded-lg hover:scale-105 hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-all duration-300 ease-in-out relative"
+      >
+        {entry.data.imageUrl && (
+          <div class="w-full h-full rounded-lg overflow-hidden flex justify-center items-center group-hover:scale-[0.90] transition-all duration-500 ease-in-out">
+            <img
+              src={entry.data.imageUrl}
+              alt={entry.data.title}
+              class="w-full h-full object-cover rounded-lg filter  transition-transform duration-300 ease-in-out"
+              decoding="async"
+              loading="eager"
+            />
+          </div>
+        )}
+
+        <div class="w-full mt-2 z-10 text-center group-hover:text-black group-hover:dark:text-white">
+          <div class="text-sm font-semibold text-gray-200 dark:text-white line-clamp-2">
+            {entry.data.title}
+          </div>
+        </div>
+      </a>
       ) : (
         // Normal Card Design
         <a

diff --git a/src/components/Blog.tsx b/src/components/Blog.tsx
@@ -1,49 +1,76 @@
-import type { CollectionEntry } from "astro:content"
-import { createEffect, createSignal, For } from "solid-js"
-import ArrowCard from "@components/ArrowCard"
-import { cn } from "@lib/utils"
+import type { CollectionEntry } from "astro:content";
+import { createEffect, createSignal, For } from "solid-js";
+import ArrowCard from "@components/ArrowCard";
+import { cn } from "@lib/utils";
 
 type Props = {
-  tags: string[]
-  data: CollectionEntry<"blog">[]
-}
+  tags: string[];
+  data: CollectionEntry<"blog">[];
+};
 
 export default function Blog({ data, tags }: Props) {
-  const [filter, setFilter] = createSignal(new Set<string>())
-  const [posts, setPosts] = createSignal<CollectionEntry<"blog">[]>([])
+  const [filter, setFilter] = createSignal(new Set<string>());
+  const [posts, setPosts] = createSignal<CollectionEntry<"blog">[]>([]);
 
   createEffect(() => {
-    setPosts(data.filter((entry) => 
-      Array.from(filter()).every((value) => 
-        entry.data.tags.some((tag:string) => 
-          tag.toLowerCase() === String(value).toLowerCase()
+    setPosts(
+      data.filter((entry) =>
+        Array.from(filter()).every((value) =>
+          entry.data.tags.some(
+            (tag: string) => tag.toLowerCase() === String(value).toLowerCase()
+          )
         )
       )
-    ))
-  })
+    );
+  });
 
   function toggleTag(tag: string) {
-    setFilter((prev) => 
-      new Set(prev.has(tag) 
-        ? [...prev].filter((t) => t !== tag) 
-        : [...prev, tag]
-      )
-    )
+    setFilter(
+      (prev) =>
+        new Set(
+          prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag]
+        )
+    );
   }
 
   return (
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
       <div class="col-span-3 sm:col-span-1">
         <div class="sticky top-24">
-          <div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">Filter</div>
+          <div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">
+            Filtr
+          </div>
           <ul class="flex flex-wrap sm:flex-col gap-1.5">
             <For each={tags}>
               {(tag) => (
                 <li>
-                  <button onClick={() => toggleTag(tag)} class={cn("w-full px-2 py-1 rounded", "whitespace-nowrap overflow-hidden overflow-ellipsis", "flex gap-2 items-center", "bg-black/5 dark:bg-white/10", "hover:bg-black/10 hover:dark:bg-white/15", "transition-colors duration-300 ease-in-out", filter().has(tag) && "text-black dark:text-white")}>
-                    <svg class={cn("size-5 fill-black/50 dark:fill-white/50", "transition-colors duration-300 ease-in-out", filter().has(tag) && "fill-black dark:fill-white")}>
-                      <use href={`/ui.svg#square`} class={cn(!filter().has(tag) ? "block" : "hidden")} />
-                      <use href={`/ui.svg#square-check`} class={cn(filter().has(tag) ? "block" : "hidden")} />
+                  <button
+                    onClick={() => toggleTag(tag)}
+                    class={cn(
+                      "w-full px-2 py-1 rounded",
+                      "whitespace-nowrap overflow-hidden overflow-ellipsis",
+                      "flex gap-2 items-center",
+                      "bg-black/5 dark:bg-white/10",
+                      "hover:bg-black/10 hover:dark:bg-white/15",
+                      "transition-colors duration-300 ease-in-out",
+                      filter().has(tag) && "text-black dark:text-white"
+                    )}
+                  >
+                    <svg
+                      class={cn(
+                        "size-5 fill-black/50 dark:fill-white/50",
+                        "transition-colors duration-300 ease-in-out",
+                        filter().has(tag) && "fill-black dark:fill-white"
+                      )}
+                    >
+                      <use
+                        href={`/ui.svg#square`}
+                        class={cn(!filter().has(tag) ? "block" : "hidden")}
+                      />
+                      <use
+                        href={`/ui.svg#square-check`}
+                        class={cn(filter().has(tag) ? "block" : "hidden")}
+                      />
                     </svg>
                     {tag}
                   </button>
@@ -68,5 +95,5 @@ export default function Blog({ data, tags }: Props) {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
@@ -1,49 +1,76 @@
-import type { CollectionEntry } from "astro:content"
-import { createEffect, createSignal, For } from "solid-js"
-import ArrowCard from "@components/ArrowCard"
-import { cn } from "@lib/utils"
+import type { CollectionEntry } from "astro:content";
+import { createEffect, createSignal, For } from "solid-js";
+import ArrowCard from "@components/ArrowCard";
+import { cn } from "@lib/utils";
 
 type Props = {
-  tags: string[]
-  data: CollectionEntry<"events">[]
-}
+  tags: string[];
+  data: CollectionEntry<"events">[];
+};
 
 export default function Events({ data, tags }: Props) {
-  const [filter, setFilter] = createSignal(new Set<string>())
-  const [events, setEvents] = createSignal<CollectionEntry<"events">[]>([])
+  const [filter, setFilter] = createSignal(new Set<string>());
+  const [events, setEvents] = createSignal<CollectionEntry<"events">[]>([]);
 
   createEffect(() => {
-    setEvents(data.filter((entry) => 
-      Array.from(filter()).every((value) => 
-        entry.data.tags.some((tag:string) => 
-          tag.toLowerCase() === String(value).toLowerCase()
+    setEvents(
+      data.filter((entry) =>
+        Array.from(filter()).every((value) =>
+          entry.data.tags.some(
+            (tag: string) => tag.toLowerCase() === String(value).toLowerCase()
+          )
         )
       )
-    ))
-  })
+    );
+  });
 
   function toggleTag(tag: string) {
-    setFilter((prev) => 
-      new Set(prev.has(tag) 
-        ? [...prev].filter((t) => t !== tag) 
-        : [...prev, tag]
-      )
-    )
+    setFilter(
+      (prev) =>
+        new Set(
+          prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag]
+        )
+    );
   }
 
   return (
     <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
       <div class="col-span-3 sm:col-span-1">
         <div class="sticky top-24">
-          <div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">Filter</div>
+          <div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">
+            Filtr
+          </div>
           <ul class="flex flex-wrap sm:flex-col gap-1.5">
             <For each={tags}>
               {(tag) => (
                 <li>
-                  <button onClick={() => toggleTag(tag)} class={cn("w-full px-2 py-1 rounded", "whitespace-nowrap overflow-hidden overflow-ellipsis", "flex gap-2 items-center", "bg-black/5 dark:bg-white/10", "hover:bg-black/10 hover:dark:bg-white/15", "transition-colors duration-300 ease-in-out", filter().has(tag) && "text-black dark:text-white")}>
-                    <svg class={cn("size-5 fill-black/50 dark:fill-white/50", "transition-colors duration-300 ease-in-out", filter().has(tag) && "fill-black dark:fill-white")}>
-                      <use href={`/ui.svg#square`} class={cn(!filter().has(tag) ? "block" : "hidden")} />
-                      <use href={`/ui.svg#square-check`} class={cn(filter().has(tag) ? "block" : "hidden")} />
+                  <button
+                    onClick={() => toggleTag(tag)}
+                    class={cn(
+                      "w-full px-2 py-1 rounded",
+                      "whitespace-nowrap overflow-hidden overflow-ellipsis",
+                      "flex gap-2 items-center",
+                      "bg-black/5 dark:bg-white/10",
+                      "hover:bg-black/10 hover:dark:bg-white/15",
+                      "transition-colors duration-300 ease-in-out",
+                      filter().has(tag) && "text-black dark:text-white"
+                    )}
+                  >
+                    <svg
+                      class={cn(
+                        "size-5 fill-black/50 dark:fill-white/50",
+                        "transition-colors duration-300 ease-in-out",
+                        filter().has(tag) && "fill-black dark:fill-white"
+                      )}
+                    >
+                      <use
+                        href={`/ui.svg#square`}
+                        class={cn(!filter().has(tag) ? "block" : "hidden")}
+                      />
+                      <use
+                        href={`/ui.svg#square-check`}
+                        class={cn(filter().has(tag) ? "block" : "hidden")}
+                      />
                     </svg>
                     {tag}
                   </button>
@@ -68,5 +95,5 @@ export default function Events({ data, tags }: Props) {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/Products.tsx b/src/components/Products.tsx
@@ -0,0 +1,102 @@
+import type { CollectionEntry } from "astro:content";
+import { createEffect, createSignal, For } from "solid-js";
+import ArrowCard from "@components/ArrowCard";
+import { cn } from "@lib/utils";
+
+type Props = {
+  tags: string[];
+  data: CollectionEntry<"products">[];
+};
+
+export default function Products({ data, tags }: Props) {
+  const [filter, setFilter] = createSignal(new Set<string>());
+  const [products, setProducts] = createSignal<CollectionEntry<"products">[]>(
+    []
+  );
+
+  createEffect(() => {
+    setProducts(
+      data.filter((entry) =>
+        Array.from(filter()).every((value) =>
+          entry.data.tags.some(
+            (tag: string) => tag.toLowerCase() === String(value).toLowerCase()
+          )
+        )
+      )
+    );
+  });
+
+  function toggleTag(tag: string) {
+    setFilter(
+      (prev) =>
+        new Set(
+          prev.has(tag) ? [...prev].filter((t) => t !== tag) : [...prev, tag]
+        )
+    );
+  }
+
+  return (
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+      {/* Filter Section */}
+      <div class="col-span-3 sm:col-span-1">
+        <div class="sticky top-24">
+          <div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">
+            Filtr
+          </div>
+          <ul class="flex flex-wrap sm:flex-col gap-1.5">
+            <For each={tags}>
+              {(tag) => (
+                <li>
+                  <button
+                    onClick={() => toggleTag(tag)}
+                    class={cn(
+                      "w-full px-2 py-1 rounded",
+                      "whitespace-nowrap overflow-hidden overflow-ellipsis",
+                      "flex gap-2 items-center",
+                      "bg-black/5 dark:bg-white/10",
+                      "hover:bg-black/10 hover:dark:bg-white/15",
+                      "transition-colors duration-300 ease-in-out",
+                      filter().has(tag) && "text-black dark:text-white"
+                    )}
+                  >
+                    <svg
+                      class={cn(
+                        "size-5 fill-black/50 dark:fill-white/50",
+                        "transition-colors duration-300 ease-in-out",
+                        filter().has(tag) && "fill-black dark:fill-white"
+                      )}
+                    >
+                      <use
+                        href={`/ui.svg#square`}
+                        class={cn(!filter().has(tag) ? "block" : "hidden")}
+                      />
+                      <use
+                        href={`/ui.svg#square-check`}
+                        class={cn(filter().has(tag) ? "block" : "hidden")}
+                      />
+                    </svg>
+                    {tag}
+                  </button>
+                </li>
+              )}
+            </For>
+          </ul>
+        </div>
+      </div>
+
+      {/* Product Grid */}
+      <div class="col-span-3 sm:col-span-2">
+        <div class="flex flex-col">
+          <div class="text-sm uppercase mb-2 text-center sm:text-left">
+            POKAZYWANIE {products().length} Z {data.length} PRODUKTÓW
+          </div>
+          <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 place-items-center">
+            {products().map((product) => (
+              <ArrowCard entry={product} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}