new layout

6 files changed, 163 insertions, 20 deletions

diff --git a/apps/web/src/app/ui/page.tsx b/apps/web/src/app/ui/page.tsx
index 43cff341..2fd44722 100644
--- a/apps/web/src/app/ui/page.tsx
+++ b/apps/web/src/app/ui/page.tsx
@@ -1,9 +1,11 @@
+import Main from "@/components/Main";
 import Sidebar from "@/components/Sidebar/index";
 
 export default async function Home() {
   return (
-    <>
+    <div className="flex w-screen">
       <Sidebar />
-    </>
+      <Main />
+    </div>
   );
 }
diff --git a/apps/web/src/assets/Memories.tsx b/apps/web/src/assets/Memories.tsx
index 09093f26..3b1c177f 100644
--- a/apps/web/src/assets/Memories.tsx
+++ b/apps/web/src/assets/Memories.tsx
@@ -2,8 +2,6 @@ export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
   props,
 ) => (
   <svg
-    width="89"
-    height="53"
     viewBox="0 0 89 53"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -16,8 +14,8 @@ export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
       height="43.0286"
       rx="5.5"
       transform="rotate(-12 0.40697 8.52821)"
-      fill="var(--gray-4)"
-      stroke="var(--gray-8)"
+      fill="var(--gray-5)"
+      stroke="var(--gray-10)"
     />
     <rect
       x="20.8257"
@@ -25,8 +23,8 @@ export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
       width="43"
       height="43"
       rx="5.5"
-      fill="var(--gray-4)"
-      stroke="var(--gray-8)"
+      fill="var(--gray-5)"
+      stroke="var(--gray-10)"
     />
     <rect
       x="47.6965"
@@ -35,8 +33,37 @@ export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
       height="43.0286"
       rx="5.5"
       transform="rotate(15 47.6965 -0.612372)"
-      fill="var(--gray-4)"
-      stroke="var(--gray-8)"
+      fill="var(--gray-5)"
+      stroke="var(--gray-10)"
+    />
+  </svg>
+);
+
+export const SpaceIcon: React.FC<React.SVGAttributes<SVGElement>> = (props) => (
+  <svg
+    viewBox="0 0 34 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="1.39502"
+      y="5.2229"
+      width="24"
+      height="24"
+      rx="5.5"
+      fill="var(--gray-5)"
+      stroke="var(--gray-10)"
+    />
+    <rect
+      x="11.2231"
+      y="-0.157702"
+      width="24"
+      height="24"
+      rx="5.5"
+      transform="rotate(20 11.2231 -0.157702)"
+      fill="var(--gray-5)"
+      stroke="var(--gray-10)"
     />
   </svg>
 );
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
new file mode 100644
index 00000000..f5f70bc8
--- /dev/null
+++ b/apps/web/src/components/Main.tsx
@@ -0,0 +1,33 @@
+import { SpaceIcon } from "@/assets/Memories";
+import { Textarea2 } from "./ui/textarea";
+import { ArrowRight, ChevronDown, GlobeIcon } from "lucide-react";
+
+export default function Main() {
+  return (
+    <main className="flex h-screen w-full items-center justify-center px-60">
+      <Textarea2
+        className="h-[20vh]"
+        textAreaProps={{
+          placeholder: "Ask your SuperMemory...",
+          className: "text-lg p-2 text-rgray-11",
+        }}
+      >
+        <div className="text-rgray-11/70 flex w-full items-center justify-center p-2">
+          <button className="text-rgray-11/70 focus-visible:ring-rgray-8 hover:bg-rgray-3 flex items-center justify-center gap-1 rounded-md px-2 py-1 ring-2 ring-transparent focus-visible:outline-none">
+            <SpaceIcon className="mr-1 h-5 w-5" />
+            Spaces
+            <ChevronDown className="h-4 w-4" />
+          </button>
+          <button className="text-rgray-11/70 focus-visible:ring-rgray-8 hover:bg-rgray-3 flex items-center justify-center gap-1 rounded-md px-2 py-1 ring-2 ring-transparent focus-visible:outline-none">
+            <GlobeIcon className="mr-1 h-4 w-4" />
+            Pages
+            <ChevronDown className="h-4 w-4" />
+          </button>
+          <button className="text-rgray-11/70 bg-rgray-3 focus-visible:ring-rgray-8 hover:bg-rgray-4 ml-auto flex items-center justify-center rounded-full p-2 ring-2 ring-transparent focus-visible:outline-none">
+            <ArrowRight className="h-5 w-5" />
+          </button>
+        </div>
+      </Textarea2>
+    </main>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/index.tsx b/apps/web/src/components/Sidebar/index.tsx
index 7f2908ff..49146140 100644
--- a/apps/web/src/components/Sidebar/index.tsx
+++ b/apps/web/src/components/Sidebar/index.tsx
@@ -30,26 +30,77 @@ export default async function Sidebar() {
   ];
 
   return (
-    <aside className="bg-rgray-2 border-rgray-6 flex h-screen w-max flex-col items-center border-r px-3 py-5 font-light">
+    <aside className="bg-rgray-2 border-rgray-6 flex h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light">
       <button
         // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-4 py-3 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+        className="on:opacity-100 on:bg-rgray-4 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
       >
-        <MemoryIcon className="h-14 w-14" />
+        <MemoryIcon className="h-12 w-12" />
         <span className="">Memories</span>
       </button>
       <button
         // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md p-4 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md px-3 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
       >
-        <Trash2 strokeWidth={1.3} className="h-8 w-8" />
+        <Trash2 strokeWidth={1.3} className="h-6 w-6" />
         <span className="">Trash</span>
       </button>
       <button
+        data-state-on="true"
+        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md px-3 py-4 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <User2 strokeWidth={1.3} className="h-6 w-6" />
+        <span className="">Profile</span>
+      </button>
+    </aside>
+  );
+}
+
+export async function SubSidebar() {
+  const pages: StoredContent[] = [
+    {
+      id: 1,
+      content: "",
+      title: "Visual Studio Code",
+      url: "https://code.visualstudio.com",
+      description: "",
+      image: "https://code.visualstudio.com/favicon.ico",
+      baseUrl: "https://code.visualstudio.com",
+      savedAt: new Date(),
+    },
+    {
+      id: 2,
+      content: "",
+      title: "yxshv/vscode: An unofficial remake of vscode's landing page",
+      url: "https://github.com/yxshv/vscode",
+      description: "",
+      image: "https://github.com/favicon.ico",
+      baseUrl: "https://github.com",
+      savedAt: new Date(),
+    },
+  ];
+
+  return (
+    <aside className="bg-rgray-2 border-rgray-6 flex h-screen w-max flex-col items-center border-r px-3 py-5 font-light">
+      <button
+        // data-state-on="true"
+        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-4 py-3 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <MemoryIcon className="h-12 w-12" />
+        <span className="">Memories</span>
+      </button>
+      <button
+        data-state-on="true"
+        className="on:opacity-100 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md bg-black p-4 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+      >
+        <Trash2 strokeWidth={1.3} className="h-6 w-6" />
+        <span className="">Trash3</span>
+      </button>
+      <button
         // data-state-on="true"
-        className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md p-3 px-4 py-4 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
+        className="on:opacity-100 on:bg-rgray-3 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md p-3 px-4 py-4 opacity-80 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
       >
-        <User2 strokeWidth={1.3} className="h-8 w-8" />
+        <User2 strokeWidth={1.3} className="h-6 w-6" />
         <span className="">Profile</span>
       </button>
     </aside>
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 68d8e79e..6c79b228 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "border-rgray-6 ring-offset-rgray-2 placeholder:text-rgray-11 focus-visible:ring-rgray-7 flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "border-rgray-6 ring-offset-rgray-2 placeholder:text-rgray-11/70 focus-within:ring-rgray-7 flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-sm transition focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
@@ -21,4 +21,35 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 );
 Textarea.displayName = "Textarea";
 
-export { Textarea };
+export interface Textarea2Props extends React.HTMLAttributes<HTMLDivElement> {
+  textAreaProps?: TextareaProps;
+}
+
+const Textarea2 = React.forwardRef<HTMLTextAreaElement, Textarea2Props>(
+  ({ className, children, textAreaProps: _textAreaProps, ...props }, ref) => {
+    const { className: textAreaClassName, ...textAreaProps } =
+      _textAreaProps || {};
+    return (
+      <div
+        className={cn(
+          "border-rgray-6 ring-offset-rgray-2 focus-within:ring-rgray-7 flex h-auto min-h-[80px] w-full flex-col items-start justify-center rounded-md border bg-transparent px-3 py-2 text-sm transition focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2",
+          className,
+        )}
+        {...props}
+      >
+        <textarea
+          className={cn(
+            "placeholder:text-rgray-11/70 h-full w-full resize-none bg-transparent font-normal focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            textAreaClassName,
+          )}
+          ref={ref}
+          {...textAreaProps}
+        />
+        {children}
+      </div>
+    );
+  },
+);
+Textarea2.displayName = "Textarea2";
+
+export { Textarea, Textarea2 };
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 6b8f3fd9..f60c00ea 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -1,4 +1,3 @@
-"use client";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";