From d7f0055ed649e6d7e74fdc59ebc8f51da13c1890 Mon Sep 17 00:00:00 2001
From: Md Ariful Islam <73895992+Arifulislam5577@users.noreply.github.com>
Date: Tue, 28 Nov 2023 11:32:07 +0600
Subject: [PATCH] Fixed: Date Picker width issue (#88)

---
 components/ComponentsList.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/ComponentsList.tsx b/components/ComponentsList.tsx
index 6d4fc154..5a6e5c7e 100644
--- a/components/ComponentsList.tsx
+++ b/components/ComponentsList.tsx
@@ -2,10 +2,9 @@
 import { CloudArrowUp, GridFour, Phone, User } from 'phosphor-react'
 import { useState } from 'react'
 import { CustomizedBarSizeWithAxisData } from '~/app/docs/components/barChart/variant/CustomizedBarSizeWithAxisData'
-import { DefaultDatePicker } from '~/app/docs/components/datePicker/variant/DefaultDatePicker'
 import { DefaultRadio } from '~/app/docs/components/radio/variant/DefaultRadio'
 
-import { Button, CheckboxGroup, Modal, Pagination, Slider, Tooltip, Tabs } from '~/src'
+import { Button, CheckboxGroup, Modal, Pagination, Slider, Tooltip, Tabs, DatePicker } from '~/src'
 
 export const SliderComponent = () => {
   return (
@@ -100,9 +99,12 @@ export const CheckboxGroupComponent = () => {
   )
 }
 export const DatePickerComponent = () => {
+  const [_, setDate] = useState<Date | null>(null)
   return (
-    <div className="scale-75">
-      <DefaultDatePicker />
+    <div className="mx-auto flex w-3/5 scale-75">
+      <DatePicker singleDatePicker={setDate}>
+        <DatePicker.SingleDate />
+      </DatePicker>
     </div>
   )
 }
@@ -125,7 +127,7 @@ export const ModalComponent = () => {
         <Modal.Header>Do you want to upload this file?</Modal.Header>
         <Modal.Body>
           <div className="space-y-6">
-            <p className="text-metal-500 text-body-4 leading-relaxed">
+            <p className="text-body-4 leading-relaxed text-metal-500">
               Contrary to popular belief, Lorem Ipsum is not simply random text.
             </p>
           </div>