Toolbar

1'use client'
2
3import React from 'react'
4import { Plus, Upload, User } from 'lucide-react'
5
6import { Button } from '@/components/ui/button'
7import {
8    DropdownMenu,
9    DropdownMenuContent,
10    DropdownMenuItem,
11    DropdownMenuTrigger,
12} from '@/components/ui/dropdown-menu'
13import { Input } from '@/components/ui/input'
14import { Toolbar } from '@/components/ui/toolbar'
15
16export function ToolbarDemo() {
17    return (
18        <Toolbar
19            start={
20                <>
21                    <Button variant="outline" size="sm">
22                        <Plus />
23                    </Button>
24                    <Button variant="outline" size="sm">
25                        <Upload />
26                    </Button>
27                </>
28            }
29            center={<Input placeholder="Search..." className="max-w-xs" />}
30            end={
31                <>
32                    <DropdownMenu>
33                        <DropdownMenuTrigger asChild>
34                            <Button
35                                variant="outline"
36                                className="flex items-center gap-1"
37                                size="sm"
38                            >
39                                <User size={16} />
40                                Profile
41                            </Button>
42                        </DropdownMenuTrigger>
43                        <DropdownMenuContent>
44                            <DropdownMenuItem>Settings</DropdownMenuItem>
45                            <DropdownMenuItem>Log Out</DropdownMenuItem>
46                        </DropdownMenuContent>
47                    </DropdownMenu>
48                </>
49            }
50        />
51    )
52}
53

1'use client'
2
3import React from 'react'
4import Image from 'next/image'
5import {
6    Filter,
7    Grid,
8    Home,
9    List,
10    MoreVertical,
11    Plus,
12    Search,
13    Upload,
14    User,
15} from 'lucide-react'
16
17import { Button } from '@/components/ui/button'
18import {
19    DropdownMenu,
20    DropdownMenuContent,
21    DropdownMenuItem,
22    DropdownMenuTrigger,
23} from '@/components/ui/dropdown-menu'
24import { Input } from '@/components/ui/input'
25import { Toolbar } from '@/components/ui/toolbar'
26
27export function ToolbarFiltersDemo() {
28    return (
29        <Toolbar
30            className="border-border bg-gray-200 p-2 shadow-sm md:rounded-full lg:rounded-full"
31            start={
32                <>
33                    <Image
34                        src="/images/nextjs.svg"
35                        alt="Logo"
36                        width={32}
37                        height={32}
38                    />
39                </>
40            }
41            center={
42                <>
43                    <Button
44                        variant="ghost"
45                        size="icon"
46                        className="border-none shadow-none hover:bg-black hover:text-white"
47                    >
48                        <Home />
49                    </Button>
50                    <Button
51                        variant="ghost"
52                        size="icon"
53                        className="border-none shadow-none hover:bg-black hover:text-white"
54                    >
55                        <Search />
56                    </Button>
57                    <Button
58                        variant="ghost"
59                        size="icon"
60                        className="border-none shadow-none hover:bg-black hover:text-white"
61                    >
62                        <User />
63                    </Button>
64                </>
65            }
66            end={
67                <div className="flex items-center gap-1">
68                    <DropdownMenu>
69                        <DropdownMenuTrigger asChild>
70                            <Button variant="ghost" size="icon">
71                                <MoreVertical className="h-4 w-4" />
72                            </Button>
73                        </DropdownMenuTrigger>
74                        <DropdownMenuContent align="end">
75                            <DropdownMenuItem>Refresh</DropdownMenuItem>
76                            <DropdownMenuItem>Bulk actions</DropdownMenuItem>
77                            <DropdownMenuItem>Settings</DropdownMenuItem>
78                        </DropdownMenuContent>
79                    </DropdownMenu>
80                </div>
81            }
82        />
83    )
84}
85