mobigrid-module 1.1.5 → 1.1.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. package/dist/components/CustomTable/CustomTable.d.ts +8 -0
  2. package/dist/components/CustomTable/Pagination.d.ts +8 -0
  3. package/dist/components/Icon.d.ts +6 -0
  4. package/dist/components/InvalidConfig.d.ts +2 -0
  5. package/dist/components/Layout/PageHeader.d.ts +13 -0
  6. package/dist/components/LoadingConfig.d.ts +2 -0
  7. package/dist/components/ui/alert.d.ts +8 -0
  8. package/dist/components/ui/button.d.ts +11 -0
  9. package/dist/components/ui/calendar.d.ts +8 -0
  10. package/dist/components/ui/date-picker-with-range.d.ts +7 -0
  11. package/dist/components/ui/dialog.d.ts +19 -0
  12. package/dist/components/ui/input.d.ts +3 -0
  13. package/dist/components/ui/pagination.d.ts +28 -0
  14. package/dist/components/ui/popover.d.ts +7 -0
  15. package/dist/components/ui/select.d.ts +13 -0
  16. package/dist/components/ui/sonner.d.ts +5 -0
  17. package/dist/components/ui/table.d.ts +10 -0
  18. package/dist/index.cjs +53 -0
  19. package/dist/index.cjs.map +1 -0
  20. package/dist/index.d.ts +9 -0
  21. package/dist/index.esm.js +70 -0
  22. package/dist/index.esm.js.map +1 -0
  23. package/dist/index.js +53 -0
  24. package/dist/index.js.map +1 -0
  25. package/dist/lib/utils.d.ts +2 -0
  26. package/dist/vite.config.d.ts +2 -0
  27. package/package.json +11 -9
  28. package/components/CustomTable/CustomTable.tsx +0 -182
  29. package/components/CustomTable/Pagination.tsx +0 -136
  30. package/components/Icon.tsx +0 -27
  31. package/components/InvalidConfig.tsx +0 -26
  32. package/components/Layout/PageHeader.tsx +0 -270
  33. package/components/LoadingConfig.tsx +0 -38
  34. package/components/ui/alert.tsx +0 -59
  35. package/components/ui/button.tsx +0 -57
  36. package/components/ui/calendar.tsx +0 -70
  37. package/components/ui/date-picker-with-range.tsx +0 -167
  38. package/components/ui/dialog.tsx +0 -120
  39. package/components/ui/input.tsx +0 -22
  40. package/components/ui/pagination.tsx +0 -117
  41. package/components/ui/popover.tsx +0 -31
  42. package/components/ui/select.tsx +0 -157
  43. package/components/ui/sonner.tsx +0 -30
  44. package/components/ui/table.tsx +0 -120
  45. package/index.d.ts +0 -55
  46. package/index.tsx +0 -196
  47. package/lib/utils.ts +0 -6
  48. package/tsconfig.json +0 -36
@@ -1,38 +0,0 @@
1
- import React from "react";
2
-
3
- export default function LoadingConfig() {
4
- return (
5
- <div
6
- style={{
7
- display: "flex",
8
- justifyContent: "center",
9
- alignItems: "center",
10
- height: "100vh",
11
- }}
12
- >
13
- <div style={{ position: "absolute" }}>
14
- <svg
15
- className="animate-spin h-5 w-5 mx-auto mb-2"
16
- xmlns="http://www.w3.org/2000/svg"
17
- fill="none"
18
- viewBox="0 0 24 24"
19
- >
20
- <circle
21
- className="opacity-25"
22
- cx="12"
23
- cy="12"
24
- r="10"
25
- stroke="currentColor"
26
- strokeWidth="4"
27
- ></circle>
28
- <path
29
- className="opacity-75"
30
- fill="currentColor"
31
- d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
32
- ></path>
33
- </svg>
34
- <div>Loading configuration...</div>
35
- </div>
36
- </div>
37
- );
38
- }
@@ -1,59 +0,0 @@
1
- import * as React from "react"
2
- import { cva, type VariantProps } from "class-variance-authority"
3
-
4
- import { cn } from "../../lib/utils"
5
-
6
- const alertVariants = cva(
7
- "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
8
- {
9
- variants: {
10
- variant: {
11
- default: "bg-background text-foreground",
12
- destructive:
13
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
- },
15
- },
16
- defaultVariants: {
17
- variant: "default",
18
- },
19
- }
20
- )
21
-
22
- const Alert = React.forwardRef<
23
- HTMLDivElement,
24
- React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
- >(({ className, variant, ...props }, ref) => (
26
- <div
27
- ref={ref}
28
- role="alert"
29
- className={cn(alertVariants({ variant }), className)}
30
- {...props}
31
- />
32
- ))
33
- Alert.displayName = "Alert"
34
-
35
- const AlertTitle = React.forwardRef<
36
- HTMLParagraphElement,
37
- React.HTMLAttributes<HTMLHeadingElement>
38
- >(({ className, ...props }, ref) => (
39
- <h5
40
- ref={ref}
41
- className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
- {...props}
43
- />
44
- ))
45
- AlertTitle.displayName = "AlertTitle"
46
-
47
- const AlertDescription = React.forwardRef<
48
- HTMLParagraphElement,
49
- React.HTMLAttributes<HTMLParagraphElement>
50
- >(({ className, ...props }, ref) => (
51
- <div
52
- ref={ref}
53
- className={cn("text-sm [&_p]:leading-relaxed", className)}
54
- {...props}
55
- />
56
- ))
57
- AlertDescription.displayName = "AlertDescription"
58
-
59
- export { Alert, AlertTitle, AlertDescription }
@@ -1,57 +0,0 @@
1
- import * as React from "react"
2
- import { Slot } from "@radix-ui/react-slot"
3
- import { cva, type VariantProps } from "class-variance-authority"
4
-
5
- import { cn } from "../../lib/utils"
6
-
7
- const buttonVariants = cva(
8
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9
- {
10
- variants: {
11
- variant: {
12
- default:
13
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14
- destructive:
15
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16
- outline:
17
- "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18
- secondary:
19
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20
- ghost: "hover:bg-accent hover:text-accent-foreground",
21
- link: "text-primary underline-offset-4 hover:underline",
22
- },
23
- size: {
24
- default: "h-9 px-4 py-2",
25
- sm: "h-8 rounded-md px-3 text-xs",
26
- lg: "h-10 rounded-md px-8",
27
- icon: "h-9 w-9",
28
- },
29
- },
30
- defaultVariants: {
31
- variant: "default",
32
- size: "default",
33
- },
34
- }
35
- )
36
-
37
- export interface ButtonProps
38
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39
- VariantProps<typeof buttonVariants> {
40
- asChild?: boolean
41
- }
42
-
43
- const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44
- ({ className, variant, size, asChild = false, ...props }, ref) => {
45
- const Comp = asChild ? Slot : "button"
46
- return (
47
- <Comp
48
- className={cn(buttonVariants({ variant, size, className }))}
49
- ref={ref}
50
- {...props}
51
- />
52
- )
53
- }
54
- )
55
- Button.displayName = "Button"
56
-
57
- export { Button, buttonVariants }
@@ -1,70 +0,0 @@
1
- import * as React from "react"
2
- import { ChevronLeft, ChevronRight } from "lucide-react"
3
- import { DayPicker } from "react-day-picker"
4
-
5
- import { cn } from "../../lib/utils"
6
- import { buttonVariants } from "./button"
7
-
8
- export type CalendarProps = React.ComponentProps<typeof DayPicker>
9
-
10
- function Calendar({
11
- className,
12
- classNames,
13
- showOutsideDays = true,
14
- ...props
15
- }: CalendarProps) {
16
- return (
17
- <DayPicker
18
- showOutsideDays={showOutsideDays}
19
- className={cn("p-3", className)}
20
- classNames={{
21
- months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
22
- month: "space-y-4",
23
- caption: "flex justify-center pt-1 relative items-center",
24
- caption_label: "text-sm font-medium",
25
- nav: "space-x-1 flex items-center",
26
- nav_button: cn(
27
- buttonVariants({ variant: "outline" }),
28
- "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
29
- ),
30
- nav_button_previous: "absolute left-1",
31
- nav_button_next: "absolute right-1",
32
- table: "w-full border-collapse space-y-1",
33
- head_row: "flex",
34
- head_cell:
35
- "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
36
- row: "flex w-full mt-2",
37
- cell: cn(
38
- "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
39
- props.mode === "range"
40
- ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
41
- : "[&:has([aria-selected])]:rounded-md"
42
- ),
43
- day: cn(
44
- buttonVariants({ variant: "ghost" }),
45
- "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
46
- ),
47
- day_range_start: "day-range-start",
48
- day_range_end: "day-range-end",
49
- day_selected:
50
- "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
51
- day_today: "bg-accent text-accent-foreground",
52
- day_outside:
53
- "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
54
- day_disabled: "text-muted-foreground opacity-50",
55
- day_range_middle:
56
- "aria-selected:bg-accent aria-selected:text-accent-foreground",
57
- day_hidden: "invisible",
58
- ...classNames,
59
- }}
60
- components={{
61
- IconLeft: () => <ChevronLeft className="h-4 w-4" />,
62
- IconRight: () => <ChevronRight className="h-4 w-4" />,
63
- }}
64
- {...props}
65
- />
66
- )
67
- }
68
- Calendar.displayName = "Calendar"
69
-
70
- export { Calendar }
@@ -1,167 +0,0 @@
1
- import * as React from "react";
2
- import {
3
- addDays,
4
- startOfWeek,
5
- endOfWeek,
6
- startOfMonth,
7
- endOfMonth,
8
- subMonths,
9
- format,
10
- subYears,
11
- startOfYear,
12
- endOfYear,
13
- } from "date-fns";
14
- import { CalendarIcon } from "lucide-react";
15
- import { DateRange } from "react-day-picker";
16
-
17
- import { cn } from "../../lib/utils";
18
- import { Button } from "./button";
19
- import { Calendar } from "./calendar";
20
- import {
21
- Popover,
22
- PopoverContent,
23
- PopoverTrigger,
24
- } from "./popover";
25
- import {
26
- Select,
27
- SelectContent,
28
- SelectItem,
29
- SelectTrigger,
30
- SelectValue,
31
- } from "./select";
32
-
33
- export function DatePickerWithRange({
34
- className,
35
- dateFrom,
36
- dateTo,
37
- handleDateChange,
38
- }: React.HTMLAttributes<HTMLDivElement> & {
39
- dateFrom?: Date;
40
- dateTo?: Date;
41
- handleDateChange?: (range: DateRange | undefined) => void;
42
- }) {
43
- const [date, setDate] = React.useState<DateRange | undefined>({
44
- from: dateFrom || new Date(2022, 0, 20),
45
- to: dateTo || addDays(new Date(2022, 0, 20), 20),
46
- });
47
-
48
- const presets = [
49
- {
50
- label: "Hier",
51
- getValue: () => {
52
- const yesterday = new Date();
53
- yesterday.setDate(yesterday.getDate() - 1);
54
- return { from: yesterday, to: yesterday };
55
- },
56
- },
57
- {
58
- label: "Cette semaine",
59
- getValue: () => {
60
- const today = new Date();
61
- return { from: startOfWeek(today), to: endOfWeek(today) };
62
- },
63
- },
64
- {
65
- label: "Ce mois-ci",
66
- getValue: () => {
67
- const today = new Date();
68
- return { from: startOfMonth(today), to: endOfMonth(today) };
69
- },
70
- },
71
- {
72
- label: "Le mois dernier",
73
- getValue: () => {
74
- const today = new Date();
75
- const lastMonth = subMonths(today, 1);
76
- return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
77
- },
78
- },
79
- {
80
- label: "Cette année",
81
- getValue: () => {
82
- const today = new Date();
83
- return { from: startOfYear(today), to: endOfYear(today) };
84
- },
85
- },
86
- {
87
- label: "L'année dernière",
88
- getValue: () => {
89
- const today = new Date();
90
- const lastYear = subYears(today, 1);
91
- return { from: startOfYear(lastYear), to: endOfYear(lastYear) };
92
- },
93
- },
94
- ];
95
-
96
- const handleSelect = (newDate: DateRange | undefined) => {
97
- setDate(newDate);
98
- handleDateChange?.(newDate);
99
- };
100
-
101
- return (
102
- <div className={cn("grid gap-2", className)}>
103
- <Popover>
104
- <PopoverTrigger asChild>
105
- <Button
106
- id="date"
107
- variant={"outline"}
108
- className={cn(
109
- "w-[300px] justify-start text-left font-normal",
110
- !date && "text-muted-foreground"
111
- )}
112
- >
113
- <CalendarIcon className="mr-2 h-4 w-4" />
114
- {date?.from ? (
115
- date.to ? (
116
- <>
117
- {format(date.from, "LLL dd, y")} -{" "}
118
- {format(date.to, "LLL dd, y")}
119
- </>
120
- ) : (
121
- format(date.from, "LLL dd, y")
122
- )
123
- ) : (
124
- <span>Choisissez une date</span>
125
- )}
126
- </Button>
127
- </PopoverTrigger>
128
- <PopoverContent
129
- className="flex w-auto flex-col space-y-4 p-4"
130
- align="start"
131
- >
132
- <Select
133
- onValueChange={(value) => {
134
- const preset = presets.find((preset) => preset.label === value);
135
- if (preset) {
136
- const newDate = preset.getValue();
137
- setDate(newDate);
138
- handleDateChange?.(newDate);
139
- }
140
- }}
141
- >
142
- <SelectTrigger className="w-[300px]">
143
- <SelectValue placeholder="Sélectionnez un préréglage" />
144
- </SelectTrigger>
145
- <SelectContent position="popper">
146
- {presets.map((preset) => (
147
- <SelectItem key={preset.label} value={preset.label}>
148
- {preset.label}
149
- </SelectItem>
150
- ))}
151
- </SelectContent>
152
- </Select>
153
- <div className="rounded-md border">
154
- <Calendar
155
- initialFocus
156
- mode="range"
157
- defaultMonth={date?.from}
158
- selected={date}
159
- onSelect={handleSelect}
160
- numberOfMonths={2}
161
- />
162
- </div>
163
- </PopoverContent>
164
- </Popover>
165
- </div>
166
- );
167
- }
@@ -1,120 +0,0 @@
1
- import * as React from "react"
2
- import * as DialogPrimitive from "@radix-ui/react-dialog"
3
- import { X } from "lucide-react"
4
-
5
- import { cn } from "../../lib/utils"
6
-
7
- const Dialog = DialogPrimitive.Root
8
-
9
- const DialogTrigger = DialogPrimitive.Trigger
10
-
11
- const DialogPortal = DialogPrimitive.Portal
12
-
13
- const DialogClose = DialogPrimitive.Close
14
-
15
- const DialogOverlay = React.forwardRef<
16
- React.ElementRef<typeof DialogPrimitive.Overlay>,
17
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
18
- >(({ className, ...props }, ref) => (
19
- <DialogPrimitive.Overlay
20
- ref={ref}
21
- className={cn(
22
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
23
- className
24
- )}
25
- {...props}
26
- />
27
- ))
28
- DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
29
-
30
- const DialogContent = React.forwardRef<
31
- React.ElementRef<typeof DialogPrimitive.Content>,
32
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
33
- >(({ className, children, ...props }, ref) => (
34
- <DialogPortal>
35
- <DialogOverlay />
36
- <DialogPrimitive.Content
37
- ref={ref}
38
- className={cn(
39
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
40
- className
41
- )}
42
- {...props}
43
- >
44
- {children}
45
- <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
46
- <X className="h-4 w-4" />
47
- <span className="sr-only">Close</span>
48
- </DialogPrimitive.Close>
49
- </DialogPrimitive.Content>
50
- </DialogPortal>
51
- ))
52
- DialogContent.displayName = DialogPrimitive.Content.displayName
53
-
54
- const DialogHeader = ({
55
- className,
56
- ...props
57
- }: React.HTMLAttributes<HTMLDivElement>) => (
58
- <div
59
- className={cn(
60
- "flex flex-col space-y-1.5 text-center sm:text-left",
61
- className
62
- )}
63
- {...props}
64
- />
65
- )
66
- DialogHeader.displayName = "DialogHeader"
67
-
68
- const DialogFooter = ({
69
- className,
70
- ...props
71
- }: React.HTMLAttributes<HTMLDivElement>) => (
72
- <div
73
- className={cn(
74
- "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
75
- className
76
- )}
77
- {...props}
78
- />
79
- )
80
- DialogFooter.displayName = "DialogFooter"
81
-
82
- const DialogTitle = React.forwardRef<
83
- React.ElementRef<typeof DialogPrimitive.Title>,
84
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
85
- >(({ className, ...props }, ref) => (
86
- <DialogPrimitive.Title
87
- ref={ref}
88
- className={cn(
89
- "text-lg font-semibold leading-none tracking-tight",
90
- className
91
- )}
92
- {...props}
93
- />
94
- ))
95
- DialogTitle.displayName = DialogPrimitive.Title.displayName
96
-
97
- const DialogDescription = React.forwardRef<
98
- React.ElementRef<typeof DialogPrimitive.Description>,
99
- React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100
- >(({ className, ...props }, ref) => (
101
- <DialogPrimitive.Description
102
- ref={ref}
103
- className={cn("text-sm text-muted-foreground", className)}
104
- {...props}
105
- />
106
- ))
107
- DialogDescription.displayName = DialogPrimitive.Description.displayName
108
-
109
- export {
110
- Dialog,
111
- DialogPortal,
112
- DialogOverlay,
113
- DialogTrigger,
114
- DialogClose,
115
- DialogContent,
116
- DialogHeader,
117
- DialogFooter,
118
- DialogTitle,
119
- DialogDescription,
120
- }
@@ -1,22 +0,0 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "../../lib/utils"
4
-
5
- const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
6
- ({ className, type, ...props }, ref) => {
7
- return (
8
- <input
9
- type={type}
10
- className={cn(
11
- "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
- className
13
- )}
14
- ref={ref}
15
- {...props}
16
- />
17
- )
18
- }
19
- )
20
- Input.displayName = "Input"
21
-
22
- export { Input }
@@ -1,117 +0,0 @@
1
- import * as React from "react"
2
- import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
3
-
4
- import { cn } from "../../lib/utils"
5
- import { ButtonProps, buttonVariants } from "./button"
6
-
7
- const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
8
- <nav
9
- role="navigation"
10
- aria-label="pagination"
11
- className={cn("mx-auto flex w-full justify-center", className)}
12
- {...props}
13
- />
14
- )
15
- Pagination.displayName = "Pagination"
16
-
17
- const PaginationContent = React.forwardRef<
18
- HTMLUListElement,
19
- React.ComponentProps<"ul">
20
- >(({ className, ...props }, ref) => (
21
- <ul
22
- ref={ref}
23
- className={cn("flex flex-row items-center gap-1", className)}
24
- {...props}
25
- />
26
- ))
27
- PaginationContent.displayName = "PaginationContent"
28
-
29
- const PaginationItem = React.forwardRef<
30
- HTMLLIElement,
31
- React.ComponentProps<"li">
32
- >(({ className, ...props }, ref) => (
33
- <li ref={ref} className={cn("", className)} {...props} />
34
- ))
35
- PaginationItem.displayName = "PaginationItem"
36
-
37
- type PaginationLinkProps = {
38
- isActive?: boolean
39
- } & Pick<ButtonProps, "size"> &
40
- React.ComponentProps<"a">
41
-
42
- const PaginationLink = ({
43
- className,
44
- isActive,
45
- size = "icon",
46
- ...props
47
- }: PaginationLinkProps) => (
48
- <a
49
- aria-current={isActive ? "page" : undefined}
50
- className={cn(
51
- buttonVariants({
52
- variant: isActive ? "outline" : "ghost",
53
- size,
54
- }),
55
- className
56
- )}
57
- {...props}
58
- />
59
- )
60
- PaginationLink.displayName = "PaginationLink"
61
-
62
- const PaginationPrevious = ({
63
- className,
64
- ...props
65
- }: React.ComponentProps<typeof PaginationLink>) => (
66
- <PaginationLink
67
- aria-label="Go to previous page"
68
- size="default"
69
- className={cn("gap-1 pl-2.5", className)}
70
- {...props}
71
- >
72
- <ChevronLeft className="h-4 w-4" />
73
- <span>Previous</span>
74
- </PaginationLink>
75
- )
76
- PaginationPrevious.displayName = "PaginationPrevious"
77
-
78
- const PaginationNext = ({
79
- className,
80
- ...props
81
- }: React.ComponentProps<typeof PaginationLink>) => (
82
- <PaginationLink
83
- aria-label="Go to next page"
84
- size="default"
85
- className={cn("gap-1 pr-2.5", className)}
86
- {...props}
87
- >
88
- <span>Next</span>
89
- <ChevronRight className="h-4 w-4" />
90
- </PaginationLink>
91
- )
92
- PaginationNext.displayName = "PaginationNext"
93
-
94
- const PaginationEllipsis = ({
95
- className,
96
- ...props
97
- }: React.ComponentProps<"span">) => (
98
- <span
99
- aria-hidden
100
- className={cn("flex h-9 w-9 items-center justify-center", className)}
101
- {...props}
102
- >
103
- <MoreHorizontal className="h-4 w-4" />
104
- <span className="sr-only">More pages</span>
105
- </span>
106
- )
107
- PaginationEllipsis.displayName = "PaginationEllipsis"
108
-
109
- export {
110
- Pagination,
111
- PaginationContent,
112
- PaginationLink,
113
- PaginationItem,
114
- PaginationPrevious,
115
- PaginationNext,
116
- PaginationEllipsis,
117
- }
@@ -1,31 +0,0 @@
1
- import * as React from "react"
2
- import * as PopoverPrimitive from "@radix-ui/react-popover"
3
-
4
- import { cn } from "../../lib/utils"
5
-
6
- const Popover = PopoverPrimitive.Root
7
-
8
- const PopoverTrigger = PopoverPrimitive.Trigger
9
-
10
- const PopoverAnchor = PopoverPrimitive.Anchor
11
-
12
- const PopoverContent = React.forwardRef<
13
- React.ElementRef<typeof PopoverPrimitive.Content>,
14
- React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15
- >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16
- <PopoverPrimitive.Portal>
17
- <PopoverPrimitive.Content
18
- ref={ref}
19
- align={align}
20
- sideOffset={sideOffset}
21
- className={cn(
22
- "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
23
- className
24
- )}
25
- {...props}
26
- />
27
- </PopoverPrimitive.Portal>
28
- ))
29
- PopoverContent.displayName = PopoverPrimitive.Content.displayName
30
-
31
- export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }