feat: base submit bounty modal

src/Components/Inputs/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import DatePicker from './DatePicker';
+
+export default {
+    title: 'Shared/DatePicker',
+    component: DatePicker,
+
+} as ComponentMeta<typeof DatePicker>;
+
+const Template: ComponentStory<typeof DatePicker> = (args) => <DatePicker {...args} />
+
+
+export const Default = Template.bind({});
+Default.args = {
+    value: new Date(),
+    classes: { containerClasses: "max-w-[360px] bg-white" }
+}
+
+
+

src/Components/Inputs/DatePicker/DatePicker.tsx

@@ -0,0 +1,38 @@
+import ReactDatePicker from "react-datepicker";
+import { MdCalendarToday } from "react-icons/md";
+import "react-datepicker/dist/react-datepicker.css";
+
+interface Props {
+    value?: Date,
+    onChange?: (newValue: Date | null) => void
+    classes?: {
+        containerClasses?: string,
+        inputClasses?: string
+    };
+    className?: string
+    innerClassname?: string
+}
+
+export default function DatePicker({ value = new Date(), onChange = () => { }, classes, className }: Props) {
+    return (
+        <div className={`relative border flex gap-10 rounded-8 text-gray-600  py-10 px-14
+         focus-within:outline-primary 
+         ${className} ${classes?.containerClasses}`}>
+            <MdCalendarToday className="flex-shrink-0 self-center" />
+            <ReactDatePicker
+                selected={value}
+                onChange={onChange}
+                className={`
+                    block
+                    w-full
+                    rounded-md
+                    border-gray-300 
+                    bg-transparent
+                    cursor-pointer
+                   focus-visible:outline-none
+                   text-gray-800
+                   ${classes?.inputClasses} `}
+            ></ReactDatePicker>
+        </div>
+    )
+}