From 049555b782023d132f39130551b046e57f511175 Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Wed, 29 Nov 2023 21:28:00 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=B0=F0=9F=9A=A5=20=E2=86=9D=20[=20FCDB?= =?UTF-8?q?-24=20]=20Taking=20a=20new=20approach=20to=20the=20saas/onboard?= =?UTF-8?q?ing=20landing=20area?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Section/Navbar.tsx | 277 ++++++++++++++++++++++++++++++---- package.json | 1 + yarn.lock | 10 +- 3 files changed, 256 insertions(+), 32 deletions(-) diff --git a/components/Section/Navbar.tsx b/components/Section/Navbar.tsx index 12e5f037..ebab194d 100644 --- a/components/Section/Navbar.tsx +++ b/components/Section/Navbar.tsx @@ -1,5 +1,5 @@ import { Avatar, AvatarFallback, AvatarImage } from "../ui/Avatar"; -import { useEffect, Fragment, useState } from "react"; +import { useEffect, Fragment, useState, useRef } from "react"; import Link from "next/link"; import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react' @@ -13,34 +13,257 @@ import { XMarkIcon, } from '@heroicons/react/24/outline' import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid'; +import { MdOutlineSpaceDashboard } from 'react-icons/md'; +import { TfiDashboard } from 'react-icons/tfi'; +import { HiBars3 } from 'react-icons/hi2'; +import { AiFillCloseCircle } from 'react-icons/ai'; -export const NavbarMinimal: React.FC = () => { - const supabase = useSupabaseClient(); - const session = useSession(); - - return ( - - ); -}; + + + + + ) +} const products = [ { name: 'Your planets', description: '', href: '/garden', icon: ChartPieIcon }, @@ -56,7 +279,7 @@ function classNames(...classes) { return classes.filter(Boolean).join(' ') } -export default function Navbar() { +export function Navbar() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return ( diff --git a/package.json b/package.json index 41eb7117..67a9e9b8 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react": "^18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.48.2", + "react-icons": "^5.0.1", "react-spinners": "^0.13.8", "tailwind-merge": "^2.0.0", "tailwindcss": "^3.2.4", diff --git a/yarn.lock b/yarn.lock index dd292968..a4276986 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1050,11 +1050,6 @@ dependencies: tslib "^2.4.0" -"@tailwindcss/aspect-ratio@^0.4.2": - version "0.4.2" - resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba" - integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ== - "@tailwindcss/forms@^0.5.3": version "0.5.7" resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz" @@ -4990,6 +4985,11 @@ react-hook-form@^7.48.2: resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.48.2.tgz" integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A== +react-icons@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee" + integrity sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"