turkey/cv4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Search

Browse Source
This commit is contained in:
User
2024-12-28 22:41:16 -05:00
parent 55414d56a4
commit 2b52f7f15a
8 changed files with 163 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
resources/js/components/ui/app-sidebar.jsx
View File

@@ -1,18 +1,26 @@
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem } from '@/components/ui/sidebar';
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { useState } from 'react';
import { Link, router, usePage } from '@inertiajs/react';
import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, Search, Book } from 'lucide-react';
import { BadgeCheck, ChevronsUpDown, Star, History, ChevronDown, LogOut, ChevronRight } from 'lucide-react';
import { Link, usePage } from '@inertiajs/react';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
export function AppSidebar({ auth }) {
const { tags } = usePage().props;
const [search, setSearch] = useState('');
const searchOnSubmitHandler = (e) => {
e.preventDefault();
// Visit the search page
router.get(route('comics.search', [search]), {}, {
});
}
const SidebarItem = (props) => {
const searchParams = new URL(window.location).searchParams;
const isActive = (!searchParams.has(props.query) && props.name === 'All') || (searchParams.has(props.query) && searchParams.get(props.query) === props.path_word);
@@ -27,8 +35,9 @@ export function AppSidebar({ auth }) {
return (
<SidebarMenuItem>
<SidebarMenuButton asChild isActive={ isActive }>
<Link
href={ "/?" + searchParams.toString() }><span>{ props.name }</span></Link>
<Link href={ "/?" + searchParams.toString() } onClick={ (e) => setSearch("") }>
<span>{ props.name }</span>
</Link>
</SidebarMenuButton>
{ props.count && <SidebarMenuBadge>{ props.count }</SidebarMenuBadge> }
</SidebarMenuItem>
@@ -38,6 +47,32 @@ export function AppSidebar({ auth }) {
return (
<Sidebar>
<SidebarContent>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<Link href={ route('comics.index')}>
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
<Book className="size-4" />
</div>
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold">Comic</span>
<span>0.0.0</span>
</div>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
<SidebarGroup className="py-0">
<SidebarGroupContent className="relative">
<form onSubmit={ (e) => searchOnSubmitHandler(e)} >
<label htmlFor="search" className="sr-only">Search</label>
<SidebarInput onChange={ (e) => setSearch(e.target.value) } id="search" placeholder="Search" className="pl-8" />
<Search className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
</form>
</SidebarGroupContent>
</SidebarGroup>
</SidebarHeader>
<Collapsible defaultOpen className="group/collapsible">
<SidebarGroup>
<SidebarGroupLabel asChild>
@@ -48,7 +83,7 @@ export function AppSidebar({ auth }) {
<CollapsibleContent>
<SidebarGroupContent>
<SidebarMenu>
<SidebarItem path_word="all" query="tag" name="All" />
<SidebarItem path_word="all" query="tag" name="All" />
{ tags.theme.map(item => <SidebarItem query="tag" key={ item.path_word } { ...item } />) }
</SidebarMenu>
</SidebarGroupContent>