memory bar

2 files changed, 144 insertions, 16 deletions

diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
new file mode 100644
index 00000000..e2adcd94
--- /dev/null
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -0,0 +1,141 @@
+import {
+  MemoryWithImage,
+  MemoryWithImages3,
+  MemoryWithImages2,
+} from "@/assets/MemoryWithImages";
+import { type Space } from "../../../types/memory";
+import { InputWithIcon } from "../ui/input";
+import { Search } from "lucide-react";
+
+export function MemoriesBar() {
+  const spaces: Space[] = [
+    {
+      id: 1,
+      title: "Cool Tech",
+      description: "Really cool mind blowing tech",
+      content: [
+        {
+          id: 1,
+          title: "Perplexity",
+          description: "A good ui",
+          content: "",
+          image: "https://perplexity.ai/favicon.ico",
+          url: "https://perplexity.ai",
+          savedAt: new Date(),
+          baseUrl: "https://perplexity.ai",
+        },
+        {
+          id: 2,
+          title: "Pi.ai",
+          description: "A good ui",
+          content: "",
+          image: "https://pi.ai/pi-logo-192.png?v=2",
+          url: "https://pi.ai",
+          savedAt: new Date(),
+          baseUrl: "https://pi.ai",
+        },
+        {
+          id: 3,
+          title: "Visual Studio Code",
+          description: "A good ui",
+          content: "",
+          image: "https://code.visualstudio.com/favicon.ico",
+          url: "https://code.visualstudio.com",
+          savedAt: new Date(),
+          baseUrl: "https://code.visualstudio.com",
+        },
+      ],
+    },
+    {
+      id: 2,
+      title: "Cool Courses",
+      description: "Amazng",
+      content: [
+        {
+          id: 1,
+          title: "Animation on the web",
+          description: "A good ui",
+          content: "",
+          image: "https://animations.dev/favicon.ico",
+          url: "https://animations.dev",
+          savedAt: new Date(),
+          baseUrl: "https://animations.dev",
+        },
+        {
+          id: 2,
+          title: "Tailwind Course",
+          description: "A good ui",
+          content: "",
+          image:
+            "https://tailwindcss.com/_next/static/media/tailwindcss-mark.3c5441fc7a190fb1800d4a5c7f07ba4b1345a9c8.svg",
+          url: "https://tailwindcss.com",
+          savedAt: new Date(),
+          baseUrl: "https://tailwindcss.com",
+        },
+      ],
+    },
+    {
+      id: 3,
+      title: "Cool Libraries",
+      description: "Really cool mind blowing tech",
+      content: [
+        {
+          id: 1,
+          title: "Perplexity",
+          description: "A good ui",
+          content: "",
+          image: "https://yashverma.me/logo.jpg",
+          url: "https://perplexity.ai",
+          savedAt: new Date(),
+          baseUrl: "https://perplexity.ai",
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div className="text-rgray-11 flex w-full flex-col items-start py-8 text-left">
+      <div className="w-full px-8">
+        <h1 className="w-full text-2xl">Your Memories</h1>
+        <InputWithIcon
+          placeholder="Search"
+          icon={<Search className="text-rgray-11 h-5 w-5 opacity-50" />}
+          className="bg-rgray-4 mt-2 w-full"
+        />
+      </div>
+      <div className="grid w-full grid-flow-row grid-cols-3 gap-1 px-2 py-5">
+        {spaces.map((space) => (
+          <Space key={space.id} {...space} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function Space({ title, description, content, id }: Space) {
+  console.log(title, content.map((c) => c.image).reverse());
+  return (
+    <button className="hover:bg-rgray-2 focus-visible:bg-rgray-2 focus-visible:ring-rgray-7 flex flex-col items-center justify-center rounded-md p-2 text-center ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+      {content.length > 2 ? (
+        <MemoryWithImages3
+          className="h-24 w-24"
+          id={id.toString()}
+          images={content.map((c) => c.image).reverse() as string[]}
+        />
+      ) : content.length === 1 ? (
+        <MemoryWithImage
+          className="h-24 w-24"
+          id={id.toString()}
+          image={content[0].image!}
+        />
+      ) : (
+        <MemoryWithImages2
+          className="h-24 w-24"
+          id={id.toString()}
+          images={content.map((c) => c.image).reverse() as string[]}
+        />
+      )}
+      <span>{title}</span>
+    </button>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index a140a19c..214ba816 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -1,9 +1,9 @@
 "use client";
 import { StoredContent } from "@/server/db/schema";
 import { MemoryIcon } from "../../assets/Memories";
-import { Search, Trash2, User2 } from "lucide-react";
+import { Trash2, User2 } from "lucide-react";
 import React, { useState } from "react";
-import { InputWithIcon } from "../ui/input";
+import { MemoriesBar } from "./MemoriesBar";
 
 export type MenuItem = {
   icon: React.ReactNode | React.ReactNode[];
@@ -96,21 +96,8 @@ const MenuItem = ({
 
 export function SubSidebar({ children }: { children?: React.ReactNode }) {
   return (
-    <div className="bg-rgray-3 border-r-rgray-6 flex h-screen w-[50vw] flex-col items-center border-r p-8 font-light">
+    <div className="bg-rgray-3 border-r-rgray-6 flex h-screen w-[50vw] flex-col items-center border-r font-light">
       {children}
     </div>
   );
 }
-
-export function MemoriesBar() {
-  return (
-    <div className="text-rgray-11 flex  w-full flex-col items-start text-left">
-      <h1 className="text-2xl">Your Memories</h1>
-      <InputWithIcon
-        placeholder="Search"
-        icon={<Search className="h-5 w-5" />}
-        className="mt-2"
-      />
-    </div>
-  );
-}