mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-08-28 05:25:33 +00:00
added kartik's code
This commit is contained in:
Dhravya
parent
ccb1587ef5
commit
bbe83ab76f
9 changed files with 213 additions and 62 deletions
|
|
@ -1,3 +1,4 @@
|
|||
import { ArrowRightIcon } from "@radix-ui/react-icons";
|
||||
import Logo from "../../public/logo.svg";
|
||||
import { Github } from "@repo/ui/src/components/icons";
|
||||
import Image from "next/image";
|
||||
|
|
@ -24,10 +25,10 @@ function Navbar() {
|
|||
</div>
|
||||
<Link
|
||||
href="https://git.new/memory"
|
||||
className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white"
|
||||
className="m-2 flex items-center gap-3 rounded-xl bg-white/20 px-4 text-center text-white group"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
Open source
|
||||
Login
|
||||
<ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 duration-100 ease-in-out" />
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Toaster } from "@repo/ui/src/shadcn/toaster";
|
|||
import Features from "./Features";
|
||||
import Footer from "./footer";
|
||||
import { auth } from "../helpers/server/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const runtime = "edge";
|
||||
|
||||
|
|
@ -14,8 +15,12 @@ export default async function Home() {
|
|||
|
||||
console.log(user);
|
||||
|
||||
if (user) {
|
||||
// await redirect("/home")
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="dark flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
|
||||
<main className="flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
|
||||
<Navbar />
|
||||
|
||||
{/* Background gradients */}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,48 @@
|
|||
:root {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
|
||||
"Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
|
||||
"Fira Mono", "Droid Sans Mono", "Courier New", monospace;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
/* :root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
} */
|
||||
|
||||
--callout-rgb: 20, 20, 20;
|
||||
--callout-border-rgb: 108, 108, 108;
|
||||
--card-rgb: 100, 100, 100;
|
||||
--card-border-rgb: 200, 200, 200;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground: rgba(179, 188, 197, 1);
|
||||
--foreground-menu: rgba(106, 115, 125, 1);
|
||||
--background: rgba(23, 27, 31, 1);
|
||||
--secondary: rgba(31, 36, 40, 1);
|
||||
--primary: rgba(54, 157, 253, 1);
|
||||
--border: rgba(51, 57, 67, 1);
|
||||
}
|
||||
}
|
||||
|
||||
--glow-conic: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#2a8af6 0deg,
|
||||
#a853ba 180deg,
|
||||
#e92a67 360deg
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
.all-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient-background {
|
||||
background: linear-gradient(
|
||||
150deg,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
34
apps/web/app/home/header.tsx
Normal file
34
apps/web/app/home/header.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Logo from "../../public/logo.svg";
|
||||
import { AddIcon, ChatIcon } from "@repo/ui/src/icons";
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between relative z-10">
|
||||
<Link href="/">
|
||||
<Image
|
||||
src={Logo}
|
||||
alt="SuperMemory logo"
|
||||
className="hover:brightness-125 duration-200"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="absolute flex justify-center w-full -z-10">
|
||||
<button className="bg-secondary all-center h-11 rounded-full p-2 min-w-14">
|
||||
<Image src={AddIcon} alt="Add icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button className="flex shrink-0 duration-200 items-center gap-2 px-2 py-1.5 rounded-xl hover:bg-secondary">
|
||||
<Image src={ChatIcon} alt="Chat icon" />
|
||||
Start new chat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
50
apps/web/app/home/menu.tsx
Normal file
50
apps/web/app/home/menu.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MemoriesIcon, ExploreIcon, HistoryIcon } from "@repo/ui/src/icons";
|
||||
|
||||
function Menu() {
|
||||
const menuItems = [
|
||||
{
|
||||
icon: MemoriesIcon,
|
||||
text: "Memories",
|
||||
url: "/",
|
||||
},
|
||||
{
|
||||
icon: ExploreIcon,
|
||||
text: "Explore",
|
||||
url: "/explore",
|
||||
},
|
||||
{
|
||||
icon: HistoryIcon,
|
||||
text: "History",
|
||||
url: "/history",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="absolute h-full p-4 flex items-center top-0 left-0">
|
||||
<div className="">
|
||||
<div className="hover:rounded-2x group inline-flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] bg-secondary px-3 py-4 duration-200 hover:w-40">
|
||||
{menuItems.map((item) => (
|
||||
<div
|
||||
key={item.url}
|
||||
className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90"
|
||||
>
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={`${item.text} icon`}
|
||||
className="hover:brightness-125 duration-200"
|
||||
/>
|
||||
<p className="opacity-0 duration-200 group-hover:opacity-100">
|
||||
{item.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Menu;
|
||||
25
apps/web/app/home/page.tsx
Normal file
25
apps/web/app/home/page.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from "react";
|
||||
import Menu from "./menu";
|
||||
import Header from "./header";
|
||||
import QueryInput from "./queryinput";
|
||||
|
||||
function Page() {
|
||||
return (
|
||||
<main className="h-screen flex flex-col p-4 relative">
|
||||
<Menu />
|
||||
|
||||
<Header />
|
||||
|
||||
<div className="max-w-3xl flex mx-auto w-full flex-col">
|
||||
{/* all content goes here */}
|
||||
<div className=""></div>
|
||||
|
||||
<div className="w-full h-96">
|
||||
<QueryInput />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
43
apps/web/app/home/queryinput.tsx
Normal file
43
apps/web/app/home/queryinput.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { ArrowRightIcon, MemoriesIcon, SelectIcon } from "@repo/ui/src/icons";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import Divider from "@repo/ui/src/shadcn/divider";
|
||||
|
||||
function QueryInput() {
|
||||
return (
|
||||
<div className="bg-secondary h- [68px] rounded-[24px] w-full mt-40">
|
||||
{/* input and action button */}
|
||||
<div className="flex gap-4 p-3">
|
||||
<textarea
|
||||
name="query-input"
|
||||
cols={30}
|
||||
rows={7}
|
||||
className="bg-transparent pt-2.5 text-base text-[#989EA4] focus:text-foreground duration-200 tracking-[3%] outline-none resize-none w-full p-1"
|
||||
placeholder="Ask your second brain..."
|
||||
></textarea>
|
||||
|
||||
<button className="h-12 w-12 rounded-[14px] bg-[#21303D] all-center shrink-0 hover:brightness-125 duration-200 outline-none focus:outline focus:outline-primary active:scale-90">
|
||||
<Image src={ArrowRightIcon} alt="Right arrow icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* suggestions */}
|
||||
<div className="flex items-center gap-6 p-2">
|
||||
<button className="bg-[#2B3237] h-9 p-2 px-3 flex items-center gap-2 rounded-full">
|
||||
<Image src={MemoriesIcon} alt="Memories icon" className="w-5" />
|
||||
<span className="pr-3">Filters</span>
|
||||
<Image src={SelectIcon} alt="Select icon" className="w-4" />
|
||||
</button>
|
||||
<div className="flex gap-6 brightness-75">
|
||||
<p>Nvidia</p>
|
||||
<p>Open-source</p>
|
||||
<p>Artificial Intelligence</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default QueryInput;
|
||||
|
|
@ -61,9 +61,9 @@ export default function RootLayout({
|
|||
}): JSX.Element {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
{/* <head>
|
||||
<ThemeScript />
|
||||
</head>
|
||||
</head> */}
|
||||
{/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
|
||||
<body className={`${inter.className} dark`}>{children}</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,19 +20,14 @@ const config = {
|
|||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
foreground: "var(--foreground)",
|
||||
"foreground-menu": "var(--foreground-menu)",
|
||||
background: "var(--background)",
|
||||
secondary: "var(--secondary)",
|
||||
primary: "var(--primary)",
|
||||
border: "var(--border)",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue