blob: fc07b4bf4f1f34a3c9633e26d0183e1af23b315f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
"use client"
import * as React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Infinity, Grid3X3, RotateCcw } from "lucide-react"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
interface ViewModeToggleProps {
isInfiniteMode: boolean
onSwitch: (pageSize: number) => void
className?: string
}
export function ViewModeToggle({ isInfiniteMode, onSwitch, className }: ViewModeToggleProps) {
const switchToPagination = React.useCallback(() => {
onSwitch(10)
}, [onSwitch])
// 새로고침
const handleRefresh = React.useCallback(() => {
window.location.reload()
}, [])
return (
<div className={`flex items-center gap-2 ${className}`}>
{/* 현재 모드 표시 */}
<div className="flex items-center gap-2">
{isInfiniteMode && (
<Badge variant="default" className="bg-blue-100 text-blue-800 hover:bg-blue-200">
<Infinity className="h-3 w-3 mr-1" />
무한 스크롤 모드
</Badge>
) }
</div>
{/* 모드 전환 버튼 */}
<div className="flex items-center gap-1">
{isInfiniteMode && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="sm"
onClick={switchToPagination}
className="h-8 px-2"
>
<Grid3X3 className="h-4 w-4 mr-1" />
페이지 모드
</Button>
</TooltipTrigger>
<TooltipContent>
<p>페이지네이션 모드로 전환 (20개씩 표시)</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) }
{/* 새로고침 버튼 */}
{isInfiniteMode && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={handleRefresh}
className="h-8 w-8 p-0"
>
<RotateCcw className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>새로고침</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
</div>
)
}
|
