feat: update button variant usage in TimePicker and Calendar components and add Date-Range to Calendar
This commit is contained in:
parent
68d36c62ce
commit
d3dfc3dc0d
3 changed files with 9 additions and 7 deletions
|
@ -9,7 +9,7 @@ import {
|
||||||
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
|
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { Button, buttonVariants } from '@/components/ui/button';
|
import { Button, buttonVariants } from '@/components/custom-ui/button';
|
||||||
|
|
||||||
function Calendar({
|
function Calendar({
|
||||||
className,
|
className,
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { ChevronDownIcon } from 'lucide-react';
|
import { ChevronDownIcon } from 'lucide-react';
|
||||||
|
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/custom-ui/button';
|
||||||
import { Calendar } from '@/components/custom-ui/calendar';
|
import { Calendar } from '@/components/custom-ui/calendar';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
|
@ -38,11 +38,7 @@ export default function TimePicker({
|
||||||
</Label>
|
</Label>
|
||||||
<Popover open={open} onOpenChange={setOpen}>
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
<PopoverTrigger asChild>
|
<PopoverTrigger asChild>
|
||||||
<Button
|
<Button variant='calendar' id='date'>
|
||||||
variant='outline'
|
|
||||||
id='date'
|
|
||||||
className='w-32 justify-between font-normal'
|
|
||||||
>
|
|
||||||
{date ? date.toLocaleDateString() : 'Select date'}
|
{date ? date.toLocaleDateString() : 'Select date'}
|
||||||
<ChevronDownIcon />
|
<ChevronDownIcon />
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -66,6 +62,8 @@ export default function TimePicker({
|
||||||
day: 'text-center hover:bg-gray-500 hover:rounded-md',
|
day: 'text-center hover:bg-gray-500 hover:rounded-md',
|
||||||
}}
|
}}
|
||||||
weekStartsOn={1} // Set Monday as the first day of the week
|
weekStartsOn={1} // Set Monday as the first day of the week
|
||||||
|
startMonth={new Date(new Date().getFullYear() - 10, 0)}
|
||||||
|
endMonth={new Date(new Date().getFullYear() + 14, 12)}
|
||||||
/>
|
/>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
|
|
|
@ -23,6 +23,10 @@ const buttonVariants = cva(
|
||||||
'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
|
'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
|
||||||
|
|
||||||
link: 'text-text underline-offset-4 hover:underline',
|
link: 'text-text underline-offset-4 hover:underline',
|
||||||
|
calendar:
|
||||||
|
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 w-32 justify-between font-normal',
|
||||||
|
ghost:
|
||||||
|
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue