mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-09-06 08:16:03 +00:00
Adding keyboard shortcuts, responsive design that 99% don't need but still
This commit is contained in:
codetorso
parent
04b6add7c6
commit
a341908564
3 changed files with 149 additions and 74 deletions
|
|
@ -9,12 +9,12 @@ export const runtime = "edge";
|
|||
async function Signin() {
|
||||
return (
|
||||
<div className="flex items-center justify-between min-h-screen">
|
||||
<div className="relative w-1/2 flex items-center min-h-screen bg-secondary p-8">
|
||||
<div className="relative w-full lg:w-1/2 flex items-center justify-center lg:justify-start min-h-screen bg-secondary p-8">
|
||||
<div className="absolute top-0 left-0 p-8 text-white inline-flex gap-2 items-center">
|
||||
<Image
|
||||
src={Logo}
|
||||
alt="SuperMemory logo"
|
||||
className="hover:brightness-125 duration-200"
|
||||
className="brightness-100"
|
||||
/>
|
||||
<span className="text-xl">SuperMemory.ai</span>
|
||||
</div>
|
||||
|
|
@ -28,7 +28,7 @@ async function Signin() {
|
|||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] duration-300 ease-in-out w-3/4`}
|
||||
className="w-3/4"
|
||||
>
|
||||
<form
|
||||
action={async () => {
|
||||
|
|
@ -40,35 +40,30 @@ async function Signin() {
|
|||
>
|
||||
<button
|
||||
type="submit"
|
||||
className={`relative text-white transition-width flex justify-between w-full items-center rounded-lg bg-[#37485E] px-6 py-4 outline-none duration-300 focus:outline-none`}
|
||||
className={`text-white flex gap-3 justify-center bg-tranparent hover:border-transparent hover:bg-[#37485E] border-[#37485E] border-2 w-full py-3 items-center rounded-lg duration-100 hover:rounded-3xl`}
|
||||
>
|
||||
<div className=""/>
|
||||
|
||||
<div className="-translate-y-0">
|
||||
<div className="-translate-y-[1px]">
|
||||
<Google />
|
||||
</div>
|
||||
<span className="text-xl font-medium tracking-wide relative w-full self-start">
|
||||
<span className="text-xl font-medium tracking-wide relative ">
|
||||
Continue with Google
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-slate-500 mt-16">
|
||||
By continuing, you agree to the
|
||||
<Link href="/terms" className="text-slate-200">
|
||||
{" "}
|
||||
<div className="text-slate-100 absolute bottom-4 lg:left-8 lg:-translate-x-0 left-1/2 -translate-x-1/2 ">
|
||||
<Link href="/terms" className="text-slate-300">
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and
|
||||
<Link href="/privacy" className="text-slate-200">
|
||||
</Link> |
|
||||
<Link href="/privacy" className="text-slate-300">
|
||||
{" "}
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-1/2 flex flex-col items-center justify-center min-h-screen">
|
||||
<div className="w-1/2 hidden lg:flex flex-col items-center justify-center min-h-screen">
|
||||
<span className="text-3xl leading-relaxed italic mb-8">
|
||||
Ready for your{" "}
|
||||
<span className="text-white font-bold">Second brain</span>?
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { AddIcon } from "@repo/ui/icons";
|
|||
import Image from "next/image";
|
||||
|
||||
import { AnimatePresence, useMotionValueEvent, useScroll } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Label } from "@repo/ui/shadcn/label";
|
||||
import { Input } from "@repo/ui/shadcn/input";
|
||||
|
|
@ -54,19 +54,36 @@ export default DynamicIsland;
|
|||
|
||||
function DynamicIslandContent() {
|
||||
const [show, setshow] = useState(true);
|
||||
function cancelfn(){
|
||||
function cancelfn() {
|
||||
setshow(true);
|
||||
}
|
||||
|
||||
const lastBtn = useRef<string>();
|
||||
useEffect(() => {
|
||||
console.log(show);
|
||||
}, [show]);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
setshow(true);
|
||||
}
|
||||
if (e.key === "a" && lastBtn.current === "Alt") {
|
||||
setshow(false);
|
||||
}
|
||||
lastBtn.current = e.key;
|
||||
});
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
{show ? (
|
||||
<div
|
||||
onClick={() => setshow(!show)}
|
||||
className="bg-[#1F2428] px-3 w-[2.23rem] overflow-hidden hover:w-[8.7rem] whitespace-nowrap py-2 rounded-3xl transition-[width]"
|
||||
className="bg-[#1F2428] px-3 w-[2.23rem] overflow-hidden hover:w-[9.2rem] whitespace-nowrap py-2 rounded-3xl transition-[width] cursor-pointer"
|
||||
>
|
||||
<div className="flex gap-4 items-center">
|
||||
<Image src={AddIcon} alt="Add icon" />
|
||||
Add Content
|
||||
<Image src={AddIcon} alt="Add icon" />
|
||||
Add Content
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -80,25 +97,44 @@ function DynamicIslandContent() {
|
|||
|
||||
const fakeitems = ["spaces", "page", "note"];
|
||||
|
||||
function ToolBar({cancelfn}: {cancelfn: ()=> void}) {
|
||||
|
||||
function ToolBar({ cancelfn }: { cancelfn: () => void }) {
|
||||
const [index, setIndex] = useState(0);
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="bg-[#1F2428] py-[.35rem] px-[.6rem] rounded-2xl">
|
||||
<HoverEffect
|
||||
items={fakeitems}
|
||||
index={index}
|
||||
indexFn={(i) => setIndex(i)}
|
||||
/>
|
||||
</div>
|
||||
{ index === 0 ?
|
||||
<SpaceForm cancelfn={cancelfn} /> :
|
||||
index === 1 ?
|
||||
<PageForm cancelfn={cancelfn} /> :
|
||||
<NoteForm cancelfn={cancelfn} />
|
||||
}
|
||||
</div>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
initial={{
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
}}
|
||||
animate={{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
}}
|
||||
transition={{
|
||||
duration: 0.2,
|
||||
}}
|
||||
className="flex flex-col items-center"
|
||||
>
|
||||
<div className="bg-[#1F2428] py-[.35rem] px-[.6rem] rounded-2xl">
|
||||
<HoverEffect
|
||||
items={fakeitems}
|
||||
index={index}
|
||||
indexFn={(i) => setIndex(i)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 ? (
|
||||
<SpaceForm cancelfn={cancelfn} />
|
||||
) : index === 1 ? (
|
||||
<PageForm cancelfn={cancelfn} />
|
||||
) : (
|
||||
<NoteForm cancelfn={cancelfn} />
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +148,7 @@ export const HoverEffect = ({
|
|||
indexFn: (i: number) => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className={"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}>
|
||||
<div className={"flex"}>
|
||||
{items.map((item, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
|
|
@ -143,55 +179,96 @@ export const HoverEffect = ({
|
|||
);
|
||||
};
|
||||
|
||||
function SpaceForm({cancelfn}: {cancelfn: ()=> void}) {
|
||||
function SpaceForm({ cancelfn }: { cancelfn: () => void }) {
|
||||
return (
|
||||
<div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
|
||||
<div >
|
||||
<Label className="text-[#858B92]" htmlFor="name">Name</Label>
|
||||
<Input className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
|
||||
<div>
|
||||
<Label className="text-[#858B92]" htmlFor="name">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
|
||||
id="name"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<a className="text-blue-500" href="">
|
||||
pull from store
|
||||
</a>
|
||||
<div onClick={cancelfn} className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer">cancel</div>
|
||||
<div
|
||||
onClick={cancelfn}
|
||||
className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
|
||||
>
|
||||
cancel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PageForm({cancelfn}: {cancelfn: ()=> void}) {
|
||||
function PageForm({ cancelfn }: { cancelfn: () => void }) {
|
||||
return (
|
||||
<div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
|
||||
<div >
|
||||
<Label className="text-[#858B92]" htmlFor="name">Space</Label>
|
||||
<Input className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
|
||||
<div>
|
||||
<Label className="text-[#858B92]" htmlFor="name">
|
||||
Space
|
||||
</Label>
|
||||
<Input
|
||||
className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
|
||||
id="name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[#858B92]" htmlFor="name">
|
||||
Page Url
|
||||
</Label>
|
||||
<Input
|
||||
className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
|
||||
id="name"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div
|
||||
onClick={cancelfn}
|
||||
className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
|
||||
>
|
||||
cancel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<Label className="text-[#858B92]" htmlFor="name">Page Url</Label>
|
||||
<Input className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div onClick={cancelfn} className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer">cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NoteForm({cancelfn}: {cancelfn: ()=> void}) {
|
||||
function NoteForm({ cancelfn }: { cancelfn: () => void }) {
|
||||
return (
|
||||
<div className="bg-[#1F2428] px-4 py-3 rounded-2xl mt-2 flex flex-col gap-3">
|
||||
<div >
|
||||
<Label className="text-[#858B92]" htmlFor="name">Space</Label>
|
||||
<Input className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0" id="name"/>
|
||||
<div>
|
||||
<Label className="text-[#858B92]" htmlFor="name">
|
||||
Space
|
||||
</Label>
|
||||
<Input
|
||||
className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0"
|
||||
id="name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[#858B92]" htmlFor="name">
|
||||
Note
|
||||
</Label>
|
||||
<Textarea
|
||||
cols={4}
|
||||
className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0 resize-none"
|
||||
id="name"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div
|
||||
onClick={cancelfn}
|
||||
className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer"
|
||||
>
|
||||
cancel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<Label className="text-[#858B92]" htmlFor="name">Note</Label>
|
||||
<Textarea cols={4} className="bg-[#2B3237] focus-visible:ring-0 border-none focus-visible:ring-offset-0 resize-none" id="name"/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div onClick={cancelfn} className="bg-[#2B3237] px-2 py-1 rounded-xl cursor-pointer">cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,21 +23,24 @@ function Menu() {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="absolute h-full p-4 flex items-center top-0 left-0">
|
||||
<div className="absolute h-screen pb-[25vh] w-full p-4 flex items-end justify-end lg:justify-start lg:items-center top-0 left-0 pointer-events-none">
|
||||
<div className="">
|
||||
<div className="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">
|
||||
<div className="pointer-events-auto group 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) => (
|
||||
<Link
|
||||
href={item.url}
|
||||
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"
|
||||
className="flex w-full cursor-pointer items-center gap-3 px-1 duration-200 hover:scale-105 hover:brightness-150 active:scale-90 justify-end md:justify-start"
|
||||
>
|
||||
<p className="md:hidden opacity-0 duration-200 group-hover:opacity-100">
|
||||
{item.text}
|
||||
</p>
|
||||
<Image
|
||||
src={item.icon}
|
||||
alt={`${item.text} icon`}
|
||||
className="hover:brightness-125 duration-200"
|
||||
className="hover:brightness-125 duration-200 "
|
||||
/>
|
||||
<p className="opacity-0 duration-200 group-hover:opacity-100">
|
||||
<p className="hidden md:block opacity-0 duration-200 group-hover:opacity-100">
|
||||
{item.text}
|
||||
</p>
|
||||
</Link>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue