mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-07 08:26:15 +00:00
new layout
This commit is contained in:
Yash
parent
5aff4fb654
commit
62e2dbc7ce
6 changed files with 164 additions and 21 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
33
apps/web/src/components/Main.tsx
Normal file
33
apps/web/src/components/Main.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 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"
|
||||
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-8 w-8" />
|
||||
<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 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-6 w-6" />
|
||||
<span className="">Profile</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
"use client";
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue