vrr/supermemory
2
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-05-13 07:03:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

placeholder

Browse source
This commit is contained in:
Yash 2024-04-02 11:43:42 +00:00
parent 90eb9429fd
commit 13d0a10d7f
2 changed files with 42 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

61
apps/web/src/components/Sidebar/index.tsx
View file

@ -1,18 +1,21 @@
"use client";
import { StoredContent } from "@/server/db/schema";
import { MemoryIcon } from "../../assets/Memories";
import { Trash2, User2 } from "lucide-react";
import { Search, Trash2, User2 } from "lucide-react";
import React, { useState } from "react";
import { InputWithIcon } from "../ui/input";
export type MenuItem = {
icon: React.ReactNode | React.ReactNode[];
label: string;
content?: React.FC;
};
const menuItemsTop: Array<MenuItem> = [
{
icon: <MemoryIcon className="h-10 w-10" />,
label: "Memories",
content: MemoriesBar,
},
];
@ -32,15 +35,19 @@ export default function Sidebar({
}: {
onSelectChange?: (selectedItem: string | null) => void;
}) {
const menuItems = [...menuItemsTop, ...menuItemsBottom];
const [selectedItem, setSelectedItem] = useState<string | null>(null);
React.useEffect(() => {
onSelectChange?.(selectedItem);
}, [selectedItem]);
const Subbar =
menuItems.find((i) => i.label === selectedItem)?.content ?? (() => <></>);
return (
<>
<aside className="bg-rgray-2 border-rgray-6 flex h-screen max-h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light">
<div className="bg-rgray-2 border-r-rgray-6 flex h-screen max-h-screen w-max flex-col items-center border-r px-2 py-5 text-sm font-light">
{menuItemsTop.map((item, index) => (
<MenuItem
key={index}
@ -58,8 +65,12 @@ export default function Sidebar({
setSelectedItem={setSelectedItem}
/>
))}
</aside>
{selectedItem && <SubSidebar />}
</div>
{selectedItem && (
<SubSidebar>
<Subbar />
</SubSidebar>
)}
</>
);
}
@ -83,31 +94,23 @@ const MenuItem = ({
</button>
);
export 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(),
},
];
export function SubSidebar({ children }: { children?: React.ReactNode }) {
return (
<aside className="bg-rgray-3 border-rgray-6 flex h-screen w-[50vw] flex-col items-center border-r px-3 py-5 font-light"></aside>
<div className="bg-rgray-3 border-r-rgray-6 flex h-screen w-[50vw] flex-col items-center border-r p-8 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>
);
}

16
apps/web/src/components/ui/input.tsx
View file

@ -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-2 disabled:cursor-not-allowed disabled:opacity-50 ",
"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 ",
className,
)}
ref={ref}
@ -29,14 +29,18 @@ export interface InputWithIconProps
const InputWithIcon = React.forwardRef<HTMLInputElement, InputWithIconProps>(
({ className, type, icon, ...props }, ref) => {
return (
<div className="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-2 ">
<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 ",
className,
)}
>
{icon}
<input
type={type}
className={cn(
"placeholder:text-rgray-11 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 ",
className,
)}
className={
"placeholder:text-rgray-11/50 w-full bg-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
}
ref={ref}
{...props}
/>