feat: add icon props

Light-it-labs · Nov 29, 2024 · 3bb918f · 3bb918f
1 parent 7785dc7
commit 3bb918f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/shared/components/ui/Calendar/CalendarHeader.tsx b/src/shared/components/ui/Calendar/CalendarHeader.tsx
@@ -12,15 +12,23 @@ const calendarHeader = tv({
 
 const { root, previous, next, heading } = calendarHeader();
 
-export const CalendarHeader = () => {
+interface CalendarHeaderProps {
+  prevIcon?: React.ReactNode;
+  nextIcon?: React.ReactNode;
+}
+
+export const CalendarHeader = ({
+  prevIcon = "◀",
+  nextIcon = "▶",
+}: CalendarHeaderProps) => {
   return (
     <header className={root()}>
       <Button className={previous()} slot='previous'>
-        ◀
+        {prevIcon}
       </Button>
       <Heading className={heading()} />
       <Button className={next()} slot='next'>
-        ▶
+        {nextIcon}
       </Button>
     </header>
   );

diff --git a/src/shared/components/ui/DatePicker/DatePicker.tsx b/src/shared/components/ui/DatePicker/DatePicker.tsx
@@ -38,6 +38,7 @@ interface DatePickerBaseProps<T extends DateValue>
   label?: string;
   description?: string;
   errorMessage?: string;
+  triggerIcon?: React.ReactNode;
 }
 
 type DatePickerProps<
@@ -52,6 +53,7 @@ export const DatePicker = <T extends DateValue, U extends FieldValues>({
   name,
   control,
   slot,
+  triggerIcon = "▼",
   ...props
 }: DatePickerProps<T, U>) => {
   const controller = useFieldController({ name, control });
@@ -77,7 +79,7 @@ export const DatePicker = <T extends DateValue, U extends FieldValues>({
             />
           )}
         </DateInput>
-        <Button className={classNames.trigger}>▼</Button>
+        <Button className={classNames.trigger}>{triggerIcon}</Button>
       </Group>
 
       <FieldMessage description={description} error={errorMessage} />

diff --git a/src/shared/components/ui/DateRangePicker/DateRangePicker.tsx b/src/shared/components/ui/DateRangePicker/DateRangePicker.tsx
@@ -43,6 +43,7 @@ interface DateRangePickerBaseProps<T extends DateValue>
   label?: string;
   description?: string;
   errorMessage?: string;
+  triggerIcon?: React.ReactNode;
 }
 
 type DateRangePickerProps<
@@ -56,6 +57,7 @@ export const DateRangePicker = <T extends DateValue, U extends FieldValues>({
   errorMessage,
   control,
   name,
+  triggerIcon = "▼",
   ...props
 }: DateRangePickerProps<T, U>) => {
   const controller = useFieldController({ name, control });
@@ -89,7 +91,7 @@ export const DateRangePicker = <T extends DateValue, U extends FieldValues>({
             <DateSegment segment={segment} className={classNames.dateSegment} />
           )}
         </DateInput>
-        <Button>▼</Button>
+        <Button>{triggerIcon}</Button>
       </Group>
 
       <FieldMessage description={description} error={errorMessage} />