new layout

3 files changed, 124 insertions, 9 deletions

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 };