From 004c952dc323ef481ae0b1532bab78b244841dbc Mon Sep 17 00:00:00 2001 From: codetorso Date: Sat, 8 Jun 2024 06:25:25 +0530 Subject: Add Dynamic Island --- apps/web/app/(dash)/dynamicisland.tsx | 194 ++++++++++++++++++++++++++++++++ apps/web/app/(dash)/header.tsx | 40 ++----- apps/web/app/(dash)/home/page.tsx | 2 +- apps/web/app/(dash)/home/queryinput.tsx | 2 +- apps/web/app/(dash)/menu.tsx | 2 +- 5 files changed, 205 insertions(+), 35 deletions(-) create mode 100644 apps/web/app/(dash)/dynamicisland.tsx (limited to 'apps/web') diff --git a/apps/web/app/(dash)/dynamicisland.tsx b/apps/web/app/(dash)/dynamicisland.tsx new file mode 100644 index 00000000..a30ec8cf --- /dev/null +++ b/apps/web/app/(dash)/dynamicisland.tsx @@ -0,0 +1,194 @@ +"use client"; + +import { AddIcon } from "@repo/ui/icons"; +import Image from "next/image"; + +import { AnimatePresence, useMotionValueEvent, useScroll } from "framer-motion"; +import { useState } from "react"; +import { motion } from "framer-motion"; +import { Label } from "@repo/ui/shadcn/label"; +import { Input } from "@repo/ui/shadcn/input"; +import { Textarea } from "@repo/ui/shadcn/textarea"; + +export function DynamicIsland() { + const { scrollYProgress } = useScroll(); + const [visible, setVisible] = useState(true); + + useMotionValueEvent(scrollYProgress, "change", (current) => { + // Check if current is not undefined and is a number + if (typeof current === "number") { + let direction = current! - scrollYProgress.getPrevious()!; + + if (direction < 0 || direction === 1) { + setVisible(true); + } else { + setVisible(false); + } + } + }); + + return ( +
+ + + + + +
+ ); +} + +export default DynamicIsland; + +function DynamicIslandContent() { + const [show, setshow] = useState(true); + function cancelfn(){ + setshow(true); + } + return ( + <> + {show ? ( +
setshow(!show)} + className="bg-[#1F2428] p-2 rounded-3xl" + > + Add icon +
+ ) : ( +
+ +
+ )} + + ); +} + +const fakeitems = ["spaces", "page", "note"]; + +function ToolBar({cancelfn}: {cancelfn: ()=> void}) { + const [index, setIndex] = useState(0); + return ( +
+
+ setIndex(i)} + /> +
+ { index === 0 ? + : + index === 1 ? + : + + } +
+ ); +} + +export const HoverEffect = ({ + items, + index, + indexFn, +}: { + items: string[]; + index: number; + indexFn: (i: number) => void; +}) => { + return ( +
+ {items.map((item, idx) => ( + + ))} +
+ ); +}; + +function SpaceForm({cancelfn}: {cancelfn: ()=> void}) { + return ( +
+
+ + +
+
+ + pull from store + +
cancel
+
+
+ ); +} + +function PageForm({cancelfn}: {cancelfn: ()=> void}) { + return ( +
+
+ + +
+
+ + +
+
+
cancel
+
+
+ ); +} + +function NoteForm({cancelfn}: {cancelfn: ()=> void}) { + return ( +
+
+ + +
+
+ +