-
-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2e27916
commit a49ebb5
Showing
12 changed files
with
404 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,204 @@ | ||
| import React from "react"; | ||
| import InfoBreadCrumb from "./bread-crumb"; | ||
| "use client"; | ||
|
|
||
| import React, { useState, useEffect } from "react"; | ||
| import { SidebarTrigger } from "@/components/ui/sidebar"; | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| BreadcrumbList, | ||
| BreadcrumbPage, | ||
| BreadcrumbSeparator, | ||
| } from "@/components/ui/breadcrumb"; | ||
| import { | ||
| Command, | ||
| CommandEmpty, | ||
| CommandGroup, | ||
| CommandInput, | ||
| CommandItem, | ||
| CommandList, | ||
| } from "@/components/ui/command"; | ||
| import { | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| } from "@/components/ui/popover"; | ||
| import { Check, ChevronsUpDown, Slash } from "lucide-react"; | ||
| import { Separator } from "@/components/ui/separator"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { Button } from "@/components/ui/button"; | ||
|
|
||
| const frameworks = [ | ||
| { | ||
| value: "next.js", | ||
| label: "Next.js", | ||
| }, | ||
| { | ||
| value: "sveltekit", | ||
| label: "SvelteKit", | ||
| }, | ||
| { | ||
| value: "nuxt.js", | ||
| label: "Nuxt.js", | ||
| }, | ||
| { | ||
| value: "remix", | ||
| label: "Remix", | ||
| }, | ||
| { | ||
| value: "astro", | ||
| label: "Astro", | ||
| }, | ||
| ]; | ||
|
|
||
| export default function Infobar() { | ||
| const [isScrolled, setIsScrolled] = useState(false); | ||
| const [openPopover1, setOpenPopover1] = useState(false); | ||
| const [openPopover2, setOpenPopover2] = useState(false); | ||
| const [value, setValue] = useState(""); | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| setIsScrolled(window.scrollY > 0); | ||
| }; | ||
|
|
||
| window.addEventListener("scroll", handleScroll); | ||
| return () => window.removeEventListener("scroll", handleScroll); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <nav className="flex w-full items-start justify-between gap-4 mb-8"> | ||
| <div className="flex items-center"> | ||
| <nav | ||
| className={`flex flex-col w-full items-start sticky top-0 right-0 bg-background transition-all duration-200 ${ | ||
| isScrolled ? "shadow-sm backdrop-blur-sm z-10" : "" | ||
| }`} | ||
| > | ||
| <div className="flex flex-row items-center gap-2 py-3 w-full"> | ||
| <SidebarTrigger /> | ||
| <Separator orientation="vertical" className="h-6 bg-muted" /> | ||
| <Breadcrumb> | ||
| <BreadcrumbList> | ||
| <BreadcrumbItem> | ||
| <Popover open={openPopover1} onOpenChange={setOpenPopover1}> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| variant="ghost" | ||
| role="combobox" | ||
| aria-expanded={openPopover1} | ||
| className="justify-between p-2 h-6" | ||
| > | ||
| {value | ||
| ? frameworks.find( | ||
| (framework) => framework.value === value, | ||
| )?.label | ||
| : "BlueFinZ"} | ||
| <ChevronsUpDown className="opacity-50" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-[200px] p-0"> | ||
| <Command> | ||
| <CommandInput | ||
| placeholder="Search framework..." | ||
| className="h-9" | ||
| /> | ||
| <CommandList> | ||
| <CommandEmpty>No framework found.</CommandEmpty> | ||
| <CommandGroup> | ||
| {frameworks.map((framework) => ( | ||
| <CommandItem | ||
| key={framework.value} | ||
| value={framework.value} | ||
| onSelect={(currentValue) => { | ||
| setValue( | ||
| currentValue === value ? "" : currentValue, | ||
| ); | ||
| setOpenPopover1(false); | ||
| }} | ||
| > | ||
| {framework.label} | ||
| <Check | ||
| className={cn( | ||
| "ml-auto", | ||
| value === framework.value | ||
| ? "opacity-100" | ||
| : "opacity-0", | ||
| )} | ||
| /> | ||
| </CommandItem> | ||
| ))} | ||
| </CommandGroup> | ||
| </CommandList> | ||
| </Command> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator> | ||
| <Slash className="h-4 w-4" /> | ||
| </BreadcrumbSeparator> | ||
| <BreadcrumbItem> | ||
| <Popover open={openPopover2} onOpenChange={setOpenPopover2}> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| variant="ghost" | ||
| role="combobox" | ||
| aria-expanded={openPopover2} | ||
| className="justify-between p-2 h-6" | ||
| > | ||
| {value | ||
| ? frameworks.find( | ||
| (framework) => framework.value === value, | ||
| )?.label | ||
| : "Plura"} | ||
| <ChevronsUpDown className="opacity-50" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-[200px] p-0"> | ||
| <Command> | ||
| <CommandInput | ||
| placeholder="Search framework..." | ||
| className="h-9" | ||
| /> | ||
| <CommandList> | ||
| <CommandEmpty>No framework found.</CommandEmpty> | ||
| <CommandGroup> | ||
| {frameworks.map((framework) => ( | ||
| <CommandItem | ||
| key={framework.value} | ||
| value={framework.value} | ||
| onSelect={(currentValue) => { | ||
| setValue( | ||
| currentValue === value ? "" : currentValue, | ||
| ); | ||
| setOpenPopover2(false); | ||
| }} | ||
| > | ||
| {framework.label} | ||
| <Check | ||
| className={cn( | ||
| "ml-auto", | ||
| value === framework.value | ||
| ? "opacity-100" | ||
| : "opacity-0", | ||
| )} | ||
| /> | ||
| </CommandItem> | ||
| ))} | ||
| </CommandGroup> | ||
| </CommandList> | ||
| </Command> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbSeparator> | ||
| <Slash className="h-4 w-4" /> | ||
| </BreadcrumbSeparator> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbPage>Breadcrumb</BreadcrumbPage> | ||
| </BreadcrumbItem> | ||
| </BreadcrumbList> | ||
| </Breadcrumb> | ||
| </div> | ||
| <InfoBreadCrumb /> | ||
| {isScrolled && ( | ||
| <div className="h-px bg-gradient-to-r from-transparent via-foreground/10 to-transparent" /> | ||
| )} | ||
| </nav> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| "use client"; | ||
|
|
||
| import { useState, useEffect, useCallback } from "react"; | ||
| import { usePathname, useSearchParams } from "next/navigation"; | ||
| import { Progress } from "@/components/ui/progress"; | ||
|
|
||
| export default function ProgressBar() { | ||
| const [progress, setProgress] = useState(0); | ||
| const [isVisible, setIsVisible] = useState(false); | ||
| const pathname = usePathname(); | ||
| const searchParams = useSearchParams(); | ||
|
|
||
| // Function to start progress when navigation begins | ||
| const startProgress = useCallback(() => { | ||
| setProgress(0); | ||
| setIsVisible(true); | ||
| }, []); | ||
|
|
||
| // Function to complete the progress bar with a delay for smoothness | ||
| const completeProgress = useCallback(() => { | ||
| setProgress(100); | ||
| const timeout = setTimeout(() => { | ||
| setIsVisible(false); | ||
| setProgress(0); | ||
| }, 500); | ||
| return () => clearTimeout(timeout); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| startProgress(); | ||
|
|
||
| // Gradually increase progress to give a smooth loading effect | ||
| const interval = setInterval(() => { | ||
| setProgress((prev) => { | ||
| if (prev < 90) { | ||
| return prev + 10; // Adjust the increment and speed as needed | ||
| } | ||
| return prev; | ||
| }); | ||
| }, 200); // Update every 200ms for smoothness | ||
|
|
||
| // Complete the progress on route change completion | ||
| const complete = setTimeout(() => { | ||
| completeProgress(); | ||
| clearInterval(interval); | ||
| }, 800); // Total time for the progress to complete | ||
|
|
||
| // Cleanup timeouts and interval on unmount or rerender | ||
| return () => { | ||
| clearTimeout(complete); | ||
| clearInterval(interval); | ||
| }; | ||
| }, [pathname, searchParams, startProgress, completeProgress]); | ||
|
|
||
| if (!isVisible) return null; | ||
|
|
||
| return ( | ||
| <Progress | ||
| value={progress} | ||
| className="fixed top-0 left-0 right-0 z-50 h-1 w-full transition-opacity duration-200 bg-transparent" | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.