mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-10-10 03:28:14 +00:00
responsiveness
This commit is contained in:
Yash
parent
4400648205
commit
531c054163
4 changed files with 96 additions and 84 deletions
|
|
@ -1,11 +1,15 @@
|
|||
"use client";
|
||||
import Main from "@/components/Main";
|
||||
import Sidebar from "@/components/Sidebar/index";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<div className="flex w-screen">
|
||||
<Sidebar />
|
||||
<Main />
|
||||
<Sidebar onSelectChange={setSelectedItem} />
|
||||
<Main sidebarOpen={selectedItem !== null} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,14 @@ import { FilterCombobox } from "./Sidebar/FilterCombobox";
|
|||
import { Textarea2 } from "./ui/textarea";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
export default function Main() {
|
||||
export default function Main({ sidebarOpen }: { sidebarOpen: boolean }) {
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
return (
|
||||
<main className="flex h-screen w-full items-center justify-center px-60">
|
||||
<main
|
||||
data-sidebar-open={sidebarOpen}
|
||||
className="flex h-screen w-full items-center justify-center px-60 [&[data-sidebar-open='true']]:px-20"
|
||||
>
|
||||
<Textarea2
|
||||
className="h-[20vh]"
|
||||
textAreaProps={{
|
||||
|
|
|
|||
|
|
@ -71,13 +71,13 @@ export function FilterCombobox() {
|
|||
<CommandInput placeholder="Filter spaces..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>Nothing found</CommandEmpty>
|
||||
{/* bug: doesn't work on clicking with mouse only keyboard, weird */}
|
||||
<CommandGroup>
|
||||
{spaces.map((space) => (
|
||||
<CommandItem
|
||||
key={space.value}
|
||||
value={space.value}
|
||||
onSelect={(val) => {
|
||||
console.log(val, "selected");
|
||||
setValues((prev) =>
|
||||
prev.includes(val)
|
||||
? prev.filter((v) => v !== val)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,89 @@
|
|||
"use server";
|
||||
"use client";
|
||||
import { StoredContent } from "@/server/db/schema";
|
||||
import { AddNewPagePopover, PageItem } from "./PagesItem";
|
||||
import { CategoryItem } from "./CategoryItem";
|
||||
import { MemoryIcon } from "../../assets/Memories";
|
||||
import { Trash2, User2 } from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export default async function Sidebar() {
|
||||
export type MenuItem = {
|
||||
icon: React.ReactNode | React.ReactNode[];
|
||||
label: string;
|
||||
};
|
||||
|
||||
const menuItemsTop: Array<MenuItem> = [
|
||||
{
|
||||
icon: <MemoryIcon className="h-10 w-10" />,
|
||||
label: "Memories",
|
||||
},
|
||||
];
|
||||
|
||||
const menuItemsBottom: Array<MenuItem> = [
|
||||
{
|
||||
icon: <Trash2 strokeWidth={1.3} className="h-6 w-6" />,
|
||||
label: "Trash",
|
||||
},
|
||||
{
|
||||
icon: <User2 strokeWidth={1.3} className="h-6 w-6" />,
|
||||
label: "Profile",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Sidebar({
|
||||
onSelectChange,
|
||||
}: {
|
||||
onSelectChange?: (selectedItem: string | null) => void;
|
||||
}) {
|
||||
const [selectedItem, setSelectedItem] = useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
onSelectChange?.(selectedItem);
|
||||
}, [selectedItem]);
|
||||
|
||||
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">
|
||||
{menuItemsTop.map((item, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
item={item}
|
||||
selectedItem={selectedItem}
|
||||
setSelectedItem={setSelectedItem}
|
||||
/>
|
||||
))}
|
||||
<div className="mt-auto" />
|
||||
{menuItemsBottom.map((item, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
item={item}
|
||||
selectedItem={selectedItem}
|
||||
setSelectedItem={setSelectedItem}
|
||||
/>
|
||||
))}
|
||||
</aside>
|
||||
{selectedItem && <SubSidebar />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const MenuItem = ({
|
||||
item: { icon, label },
|
||||
selectedItem,
|
||||
setSelectedItem,
|
||||
}: {
|
||||
item: MenuItem;
|
||||
selectedItem: string | null;
|
||||
setSelectedItem: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
}) => (
|
||||
<button
|
||||
data-state-on={selectedItem === label}
|
||||
onClick={() => setSelectedItem((prev) => (prev === label ? null : label))}
|
||||
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"
|
||||
>
|
||||
{icon}
|
||||
<span className="">{label}</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
export function SubSidebar() {
|
||||
const pages: StoredContent[] = [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -30,79 +108,6 @@ 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-2 py-5 text-sm font-light">
|
||||
<button
|
||||
// data-state-on="true"
|
||||
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-10 w-10" />
|
||||
<span className="">Memories</span>
|
||||
</button>
|
||||
<button
|
||||
// data-state-on="true"
|
||||
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-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-[20vw] 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-10 w-10" />
|
||||
<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="">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 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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue