From ae64e536dc8347a20aa76aa6b6212d3198eddf19 Mon Sep 17 00:00:00 2001 From: zmeyer44 Date: Mon, 16 Oct 2023 19:40:56 -0400 Subject: [PATCH] adding zap modal --- app/(app)/_layout/Sidebar.tsx | 192 ++++++++++++++----- app/(app)/_layout/components/AuthActions.tsx | 4 +- app/(landing)/page.tsx | 2 +- app/globals.css | 6 + bun.lockb | Bin 305755 -> 318803 bytes components/CreatorCard/index.tsx | 6 +- components/Modals/ZapPicker.tsx | 82 ++++++++ components/VideoCard/index.tsx | 8 +- package.json | 1 + 9 files changed, 239 insertions(+), 62 deletions(-) create mode 100644 components/Modals/ZapPicker.tsx diff --git a/app/(app)/_layout/Sidebar.tsx b/app/(app)/_layout/Sidebar.tsx index 31f99b8..2633a2d 100644 --- a/app/(app)/_layout/Sidebar.tsx +++ b/app/(app)/_layout/Sidebar.tsx @@ -1,3 +1,5 @@ +"use client"; + import Link from "next/link"; import { RiHome6Fill, @@ -17,14 +19,36 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; +import ZapPicker from "@/components/Modals/ZapPicker"; +import { useModal } from "@/app/_providers/modal/provider"; +import { IconType } from "react-icons"; + +type NavigationLink = { + type: "link"; + href: string; +}; +type NavigationButton = { + type: "button"; + onClick: () => void; +}; +type NavigationElement = { + name: string; + label: string; + icon: IconType; + current: boolean; + active: boolean; +} & (NavigationLink | NavigationButton); export default function Sidebar() { - const navigation = [ + const modal = useModal(); + + const navigation: NavigationElement[] = [ { href: "", name: "home", label: "Home", icon: RiHome6Fill, + type: "link", current: true, active: true, }, @@ -33,6 +57,7 @@ export default function Sidebar() { name: "explore", label: "Explore", icon: RiCompassLine, + type: "link", current: false, active: false, }, @@ -41,14 +66,16 @@ export default function Sidebar() { name: "messages", label: "Messages", icon: RiQuestionAnswerLine, + type: "link", current: false, active: false, }, { - href: "", + onClick: () => modal?.show(), name: "zap", label: "Zap Flockstr", icon: HiOutlineLightningBolt, + type: "button", current: false, active: true, }, @@ -59,62 +86,123 @@ export default function Sidebar() {
{navigation.map((item) => { - if (item.active) { - return ( - -