mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 20:25:26 +03:00
Use switch and adjust colors
This commit is contained in:
Nicolas Mowen
parent
4e82b3ddd9
commit
656ca4fa7e
@ -16,8 +16,11 @@ import { ReviewFilter } from "@/types/review";
|
|||||||
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
|
import { getEndOfDayTimestamp } from "@/utils/dateUtil";
|
||||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||||
import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
|
import { FaCalendarAlt, FaFilter, FaVideo } from "react-icons/fa";
|
||||||
import { getIconTypeForGroup } from "@/utils/iconUtil";
|
|
||||||
import { IconType } from "react-icons";
|
import { IconType } from "react-icons";
|
||||||
|
import { isMobile } from "react-device-detect";
|
||||||
|
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
|
||||||
|
import { Switch } from "../ui/switch";
|
||||||
|
import { Label } from "../ui/label";
|
||||||
|
|
||||||
const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
|
const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
|
||||||
|
|
||||||
@ -137,6 +140,105 @@ function CamerasFilterButton({
|
|||||||
selectedCameras,
|
selectedCameras,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const trigger = (
|
||||||
|
<Button size="sm" className="mx-1 capitalize" variant="secondary">
|
||||||
|
<FaVideo className="md:mr-[10px] text-muted-foreground" />
|
||||||
|
<div className="hidden md:block">
|
||||||
|
{selectedCameras == undefined
|
||||||
|
? "All Cameras"
|
||||||
|
: `${selectedCameras.length} Cameras`}
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
<DropdownMenuLabel className="flex justify-center">
|
||||||
|
Filter Cameras
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<FilterCheckBox
|
||||||
|
isChecked={currentCameras == undefined}
|
||||||
|
label="All Cameras"
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
if (isChecked) {
|
||||||
|
setCurrentCameras(undefined);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{groups.length > 0 && (
|
||||||
|
<>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{groups.map(([name, conf]) => {
|
||||||
|
return (
|
||||||
|
<FilterCheckBox
|
||||||
|
key={name}
|
||||||
|
label={name}
|
||||||
|
isChecked={false}
|
||||||
|
onCheckedChange={() => {
|
||||||
|
setCurrentCameras([...conf.cameras]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{allCameras.map((item) => (
|
||||||
|
<FilterCheckBox
|
||||||
|
key={item}
|
||||||
|
isChecked={currentCameras?.includes(item) ?? false}
|
||||||
|
label={item.replaceAll("_", " ")}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
if (isChecked) {
|
||||||
|
const updatedCameras = currentCameras ? [...currentCameras] : [];
|
||||||
|
|
||||||
|
updatedCameras.push(item);
|
||||||
|
setCurrentCameras(updatedCameras);
|
||||||
|
} else {
|
||||||
|
const updatedCameras = currentCameras ? [...currentCameras] : [];
|
||||||
|
|
||||||
|
// can not deselect the last item
|
||||||
|
if (updatedCameras.length > 1) {
|
||||||
|
updatedCameras.splice(updatedCameras.indexOf(item), 1);
|
||||||
|
setCurrentCameras(updatedCameras);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<Button
|
||||||
|
variant="select"
|
||||||
|
onClick={() => {
|
||||||
|
updateCameraFilter(currentCameras);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) {
|
||||||
|
setCurrentCameras(selectedCameras);
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen(open);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
|
||||||
|
<DrawerContent>{content}</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu
|
<DropdownMenu
|
||||||
open={open}
|
open={open}
|
||||||
@ -148,87 +250,8 @@ function CamerasFilterButton({
|
|||||||
setOpen(open);
|
setOpen(open);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
|
||||||
<Button size="sm" className="mx-1 capitalize" variant="secondary">
|
<DropdownMenuContent>{content}</DropdownMenuContent>
|
||||||
<FaVideo className="md:mr-[10px] text-muted-foreground" />
|
|
||||||
<div className="hidden md:block">
|
|
||||||
{selectedCameras == undefined
|
|
||||||
? "All Cameras"
|
|
||||||
: `${selectedCameras.length} Cameras`}
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent>
|
|
||||||
<DropdownMenuLabel>Filter Cameras</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<FilterCheckBox
|
|
||||||
isChecked={currentCameras == undefined}
|
|
||||||
label="All Cameras"
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
if (isChecked) {
|
|
||||||
setCurrentCameras(undefined);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{groups.length > 0 && (
|
|
||||||
<>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{groups.map(([name, conf]) => {
|
|
||||||
return (
|
|
||||||
<FilterCheckBox
|
|
||||||
key={name}
|
|
||||||
label={name}
|
|
||||||
CheckIcon={getIconTypeForGroup(conf.icon)}
|
|
||||||
isChecked
|
|
||||||
onCheckedChange={() => {
|
|
||||||
setCurrentCameras([...conf.cameras]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{allCameras.map((item) => (
|
|
||||||
<FilterCheckBox
|
|
||||||
key={item}
|
|
||||||
isChecked={currentCameras?.includes(item) ?? false}
|
|
||||||
label={item.replaceAll("_", " ")}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
if (isChecked) {
|
|
||||||
const updatedCameras = currentCameras
|
|
||||||
? [...currentCameras]
|
|
||||||
: [];
|
|
||||||
|
|
||||||
updatedCameras.push(item);
|
|
||||||
setCurrentCameras(updatedCameras);
|
|
||||||
} else {
|
|
||||||
const updatedCameras = currentCameras
|
|
||||||
? [...currentCameras]
|
|
||||||
: [];
|
|
||||||
|
|
||||||
// can not deselect the last item
|
|
||||||
if (updatedCameras.length > 1) {
|
|
||||||
updatedCameras.splice(updatedCameras.indexOf(item), 1);
|
|
||||||
setCurrentCameras(updatedCameras);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<div className="flex justify-center items-center">
|
|
||||||
<Button
|
|
||||||
variant="select"
|
|
||||||
onClick={() => {
|
|
||||||
updateCameraFilter(currentCameras);
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -255,6 +278,58 @@ function CalendarFilterButton({
|
|||||||
"%b %-d",
|
"%b %-d",
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const trigger = (
|
||||||
|
<Button size="sm" className="mx-1" variant="secondary">
|
||||||
|
<FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
|
||||||
|
<div className="hidden md:block">
|
||||||
|
{day == undefined ? "Last 24 Hours" : selectedDate}
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
disabled={disabledDates}
|
||||||
|
selected={selectedDay}
|
||||||
|
showOutsideDays={false}
|
||||||
|
onSelect={(day) => {
|
||||||
|
setSelectedDay(day);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<Button
|
||||||
|
variant="select"
|
||||||
|
onClick={() => {
|
||||||
|
updateSelectedDay(selectedDay);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) {
|
||||||
|
setSelectedDay(day);
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen(open);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
|
||||||
|
<DrawerContent>{content}</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
open={open}
|
open={open}
|
||||||
@ -266,36 +341,8 @@ function CalendarFilterButton({
|
|||||||
setOpen(open);
|
setOpen(open);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>{trigger}</PopoverTrigger>
|
||||||
<Button size="sm" className="mx-1" variant="secondary">
|
<PopoverContent>{content}</PopoverContent>
|
||||||
<FaCalendarAlt className="md:mr-[10px] text-muted-foreground" />
|
|
||||||
<div className="hidden md:block">
|
|
||||||
{day == undefined ? "Last 24 Hours" : selectedDate}
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent>
|
|
||||||
<Calendar
|
|
||||||
mode="single"
|
|
||||||
disabled={disabledDates}
|
|
||||||
selected={selectedDay}
|
|
||||||
onSelect={(day) => {
|
|
||||||
setSelectedDay(day);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<div className="flex justify-center items-center">
|
|
||||||
<Button
|
|
||||||
variant="select"
|
|
||||||
onClick={() => {
|
|
||||||
updateSelectedDay(selectedDay);
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -320,6 +367,101 @@ function GeneralFilterButton({
|
|||||||
selectedLabels,
|
selectedLabels,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const trigger = (
|
||||||
|
<Button size="sm" className="ml-1" variant="secondary">
|
||||||
|
<FaFilter className="md:mr-[10px] text-muted-foreground" />
|
||||||
|
<div className="hidden md:block">Filter</div>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
const content = (
|
||||||
|
<>
|
||||||
|
<div className="flex p-2 justify-start items-center">
|
||||||
|
<Switch
|
||||||
|
id="reviewed"
|
||||||
|
checked={reviewed == 1}
|
||||||
|
onCheckedChange={() => setReviewed(reviewed == 0 ? 1 : 0)}
|
||||||
|
/>
|
||||||
|
<Label className="ml-2" htmlFor="reviewed">Show Reviewed</Label>
|
||||||
|
</div>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuLabel className="flex justify-center items-center">
|
||||||
|
Filter Labels
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<FilterCheckBox
|
||||||
|
isChecked={currentLabels == undefined}
|
||||||
|
label="All Labels"
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
if (isChecked) {
|
||||||
|
setCurrentLabels(undefined);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{allLabels.map((item) => (
|
||||||
|
<FilterCheckBox
|
||||||
|
key={item}
|
||||||
|
isChecked={currentLabels?.includes(item) ?? false}
|
||||||
|
label={item.replaceAll("_", " ")}
|
||||||
|
onCheckedChange={(isChecked) => {
|
||||||
|
if (isChecked) {
|
||||||
|
const updatedLabels = currentLabels ? [...currentLabels] : [];
|
||||||
|
|
||||||
|
updatedLabels.push(item);
|
||||||
|
setCurrentLabels(updatedLabels);
|
||||||
|
} else {
|
||||||
|
const updatedLabels = currentLabels ? [...currentLabels] : [];
|
||||||
|
|
||||||
|
// can not deselect the last item
|
||||||
|
if (updatedLabels.length > 1) {
|
||||||
|
updatedLabels.splice(updatedLabels.indexOf(item), 1);
|
||||||
|
setCurrentLabels(updatedLabels);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<Button
|
||||||
|
variant="select"
|
||||||
|
onClick={() => {
|
||||||
|
if (reviewed != showReviewed) {
|
||||||
|
setShowReviewed(reviewed);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedLabels != currentLabels) {
|
||||||
|
updateLabelFilter(currentLabels);
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Apply
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) {
|
||||||
|
setReviewed(showReviewed ?? 0);
|
||||||
|
setCurrentLabels(selectedLabels);
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen(open);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DrawerTrigger asChild>{trigger}</DrawerTrigger>
|
||||||
|
<DrawerContent>{content}</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
open={open}
|
open={open}
|
||||||
@ -332,85 +474,8 @@ function GeneralFilterButton({
|
|||||||
setOpen(open);
|
setOpen(open);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>{trigger}</PopoverTrigger>
|
||||||
<Button size="sm" className="ml-1" variant="secondary">
|
<PopoverContent side="left">{content}</PopoverContent>
|
||||||
<FaFilter className="md:mr-[10px] text-muted-foreground" />
|
|
||||||
<div className="hidden md:block">Filter</div>
|
|
||||||
</Button>
|
|
||||||
</PopoverTrigger>
|
|
||||||
<PopoverContent side="left">
|
|
||||||
<>
|
|
||||||
<Button
|
|
||||||
className="capitalize flex justify-between items-center w-full"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={() => setReviewed(reviewed == 0 ? 1 : 0)}
|
|
||||||
>
|
|
||||||
{reviewed ? (
|
|
||||||
<LuCheck className="w-6 h-6" />
|
|
||||||
) : (
|
|
||||||
<div className="w-6 h-6" />
|
|
||||||
)}
|
|
||||||
<div className="ml-1 w-full flex justify-start text-primary-foreground">
|
|
||||||
Show Reviewed
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuLabel>Filter Labels</DropdownMenuLabel>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<FilterCheckBox
|
|
||||||
isChecked={currentLabels == undefined}
|
|
||||||
label="All Labels"
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
if (isChecked) {
|
|
||||||
setCurrentLabels(undefined);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
{allLabels.map((item) => (
|
|
||||||
<FilterCheckBox
|
|
||||||
key={item}
|
|
||||||
isChecked={currentLabels?.includes(item) ?? false}
|
|
||||||
label={item.replaceAll("_", " ")}
|
|
||||||
onCheckedChange={(isChecked) => {
|
|
||||||
if (isChecked) {
|
|
||||||
const updatedLabels = currentLabels ? [...currentLabels] : [];
|
|
||||||
|
|
||||||
updatedLabels.push(item);
|
|
||||||
setCurrentLabels(updatedLabels);
|
|
||||||
} else {
|
|
||||||
const updatedLabels = currentLabels ? [...currentLabels] : [];
|
|
||||||
|
|
||||||
// can not deselect the last item
|
|
||||||
if (updatedLabels.length > 1) {
|
|
||||||
updatedLabels.splice(updatedLabels.indexOf(item), 1);
|
|
||||||
setCurrentLabels(updatedLabels);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<div className="flex justify-center items-center">
|
|
||||||
<Button
|
|
||||||
variant="select"
|
|
||||||
onClick={() => {
|
|
||||||
if (reviewed != showReviewed) {
|
|
||||||
setShowReviewed(reviewed);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedLabels != currentLabels) {
|
|
||||||
updateLabelFilter(currentLabels);
|
|
||||||
}
|
|
||||||
|
|
||||||
setOpen(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
</PopoverContent>
|
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,19 +25,19 @@ function Calendar({
|
|||||||
nav: "space-x-1 flex items-center",
|
nav: "space-x-1 flex items-center",
|
||||||
nav_button: cn(
|
nav_button: cn(
|
||||||
buttonVariants({ variant: "outline" }),
|
buttonVariants({ variant: "outline" }),
|
||||||
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
|
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
|
||||||
),
|
),
|
||||||
nav_button_previous: "absolute left-1",
|
nav_button_previous: "absolute left-1",
|
||||||
nav_button_next: "absolute right-1",
|
nav_button_next: "absolute right-1",
|
||||||
table: "w-full border-collapse space-y-1",
|
table: "w-full border-collapse space-y-1",
|
||||||
head_row: "flex",
|
head_row: "flex justify-center",
|
||||||
head_cell:
|
head_cell:
|
||||||
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
|
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
|
||||||
row: "flex w-full mt-2",
|
row: "flex w-full mt-2 justify-center",
|
||||||
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
|
||||||
day: cn(
|
day: cn(
|
||||||
buttonVariants({ variant: "ghost" }),
|
buttonVariants({ variant: "ghost" }),
|
||||||
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
|
"h-9 w-9 p-0 font-normal aria-selected:opacity-100",
|
||||||
),
|
),
|
||||||
day_range_end: "day-range-end",
|
day_range_end: "day-range-end",
|
||||||
day_selected:
|
day_selected:
|
||||||
|
|||||||
@ -9,7 +9,7 @@ const Switch = React.forwardRef<
|
|||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<SwitchPrimitives.Root
|
<SwitchPrimitives.Root
|
||||||
className={cn(
|
className={cn(
|
||||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-selected data-[state=unchecked]:bg-input",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user