client: add date, calender, Skeleton and Seperator components

client/app/comps/Seperator.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/lib';
+
+export const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;

client/app/comps/Skeleton.tsx

@@ -0,0 +1,5 @@
+import { cn } from '@/lib';
+
+export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}

client/app/comps/datePicker/Calender.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '@/lib';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  function buttonVariants(arg0: { variant: string }): any {
+    throw new Error('Function not implemented.');
+  }
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          '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',
+          props.mode === 'range'
+            ? '[&: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'
+            : '[&:has([aria-selected])]:rounded-md'
+        ),
+        day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
+        day_range_start: 'day-range-start',
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={
+        {
+          // IconLeft: ({ ...props }) => <FaAngleLeft className="h-4 w-4" />,
+          // IconRight: ({ ...props }) => <FaAngleRight className="h-4 w-4" />,
+        }
+      }
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };

client/app/comps/datePicker/DatePiker.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import { format } from 'date-fns';
+import { SlCalender } from 'react-icons/sl';
+
+import { cn } from '@/lib';
+import { Calendar } from './Calender';
+import { Popover, PopoverContent, PopoverTrigger } from './PopOver';
+import { AppButton } from '../forms';
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <AppButton
+          variant={'outline'}
+          className={cn('w-[280px] justify-start text-left font-normal', !date && 'text-muted-foreground')}
+        >
+          <SlCalender className="mr-2 h-4 w-4" />
+          {date ? format(date, 'PPP') : <span>Pick a date</span>}
+        </AppButton>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar mode="single" selected={date} onSelect={setDate} />
+        {/* <Calendar mode="single" selected={date} onSelect={setDate} initialFocus /> */}
+      </PopoverContent>
+    </Popover>
+  );
+}

client/app/comps/datePicker/PopOver.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        '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',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

client/app/comps/index.ts

@@ -9,3 +9,5 @@ export * from './theme';
 export * from './custom';
 export * from './Row';
 export * from './table';
+export * from './Seperator';
+export * from './Skeleton';

client/app/error.tsx

@@ -18,3 +18,4 @@ export default function PageError() {
     </div>
   );
 }
+

client/package.json

@@ -24,6 +24,8 @@
     "@next/mdx": "^14.2.7",
     "@prisma/client": "^5.19.1",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@sentry/nextjs": "^8",
@@ -59,7 +61,7 @@
     "clsx": "^2.1.1",
     "cookie-parser": "^1.4.6",
     "country-flag-icons": "^1.5.13",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "ethers": "^6.13.2",
     "framer-motion": "^10.17.9",
     "net": "^1.0.2",
@@ -70,6 +72,7 @@
     "react": "^18.3.1",
     "react-18-blockies": "^1.0.6",
     "react-copy-to-clipboard": "^5.1.0",
+    "react-day-picker": "^9.1.3",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",
     "react-icons": "^5.0.0",