aboutsummaryrefslogtreecommitdiff
path: root/apps/web/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/components')
-rw-r--r--apps/web/src/components/Main.tsx1
-rw-r--r--apps/web/src/components/Sidebar/MemoriesBar.tsx141
-rw-r--r--apps/web/src/components/Sidebar/index.tsx19
-rw-r--r--apps/web/src/components/ui/input.tsx4
-rw-r--r--apps/web/src/components/ui/textarea.tsx6
5 files changed, 150 insertions, 21 deletions
diff --git a/apps/web/src/components/Main.tsx b/apps/web/src/components/Main.tsx
index a9e09992..15042e9a 100644
--- a/apps/web/src/components/Main.tsx
+++ b/apps/web/src/components/Main.tsx
@@ -18,6 +18,7 @@ export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
placeholder: "Ask your SuperMemory...",
className: "text-lg p-2 text-rgray-11",
value,
+ autoFocus: true,
onChange: (e) => setValue(e.target.value),
}}
>
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>
- );
-}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index deb877dd..cee654a8 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
- "border-rgray-6 text-rgray-12 ring-offset-rgray-2 placeholder:text-rgray-11 focus-visible:ring-rgray-7 flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 ",
+ "border-rgray-6 text-rgray-11 placeholder:text-rgray-11 focus-visible:ring-rgray-7 flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 ",
className,
)}
ref={ref}
@@ -31,7 +31,7 @@ const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIconProps>(
return (
<div
className={cn(
- "border-rgray-6 text-rgray-12 ring-offset-rgray-2 focus-within:ring-rgray-7 flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm transition focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-1 ",
+ "border-rgray-6 text-rgray-11 focus-within:ring-rgray-7 flex h-10 w-full items-center justify-center gap-2 rounded-md border bg-transparent px-3 py-2 text-sm transition focus-within:outline-none focus-within:ring-2 ",
className,
)}
>
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 6c79b228..10a7ed75 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/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",
+ "border-rgray-6 text-rgray-11 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 font-normal transition focus-within:outline-none focus-within:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
@@ -32,14 +32,14 @@ const Textarea2 = React.forwardRef<HTMLTextAreaElement, Textarea2Props>(
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",
+ "border-rgray-6 text-rgray-11 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",
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",
+ "placeholder:text-rgray-11/70 h-full w-full resize-none bg-transparent focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
textAreaClassName,
)}
ref={ref}
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-12 01:07:33 +0000