fix responsive all pages & change style page list blog and blog item & add date picker

app/component/AnimationTextHead.js

@@ -1,10 +1,10 @@
 function AnimationTextHead({ name, text, children }) {
     return (
         <div className='flex justify-center items-start relative w-fit'>
-            <div className='overflow-hidden mb-1.5'>
+            <div className='overflow-hidden mb-[4px] md:mb-[5px] lg:mb-[6px]'>
                 <p
                     data-aos={name}
-                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[20px] font-bold'>{text}</p>
+                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold'>{text}</p>
             </div>
             <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
                 {children}

app/component/comment/ItemUser.js

@@ -55,7 +55,7 @@ function ItemUser({ update, setUpdate, list, setList, data, loading }) {
                         <Skeleton variant="text" className="!w-1/3" />
                     </>
                 ) : (
-                    <p className="text-[#495057] text-[14px] font-normal leading-[30px]">{data.comment}</p>
+                    <p className="text-[#495057] text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">{data.comment}</p>
                 )}
                 <div className="flex items-center justify-start mt-2 gap-[28px]">
                     <div className="flex items-center justify-start gap-1">

app/component/datePicker/ButtonDate.js

@@ -0,0 +1,16 @@
+import { Button as ButtonMUI } from '@mui/material'
+import React from 'react'
+
+function ButtonDate({ handleClick, id, text }) {
+    return (
+        <ButtonMUI
+            onClick={handleClick}
+            aria-describedby={id}
+            className="!border-[#E9ECEF] !text-[#6C757D]"
+        >
+            {text}
+        </ButtonMUI>
+    )
+}
+
+export default ButtonDate

app/component/datePicker/Field.js

@@ -0,0 +1,32 @@
+import { TextField } from "@mui/material"
+
+function Field({ title, handleClick }) {
+    return (
+        <div className="relative">
+            <TextField
+                label={title}
+                className="!w-full !mx-auto !bg-[#FFF]"
+                sx={{
+                    borderRadius: '8px !important',
+                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
+                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+                    ".Mui-focused": {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #0FA1B3 !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <span
+                className="absolute cursor-pointer left-0 top-0 w-full h-full"
+                onClick={handleClick}
+            ></span>
+        </div>
+    )
+}
+
+export default Field

app/component/datePicker/index.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Popover } from '@mui/material';
+import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
+import Field from './Field';
+import ButtonDate from './ButtonDate';
+
+function DatePicker({ type, date, updateDate, text, from }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => setAnchorEl(null);
+
+    const open = true;
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <div className='min-w-[700px] min-h-[700px]'>
+            {/* {from && from === 'register' ? (
+                <Field
+                    title={text}
+                    handleClick={handleClick}
+                />
+            ) : (
+                <ButtonDate
+                    text={text}
+                    handleClick={handleClick}
+                />
+            )} */}
+            <DatePickerJalali
+                    onChange={(e) => {
+                        if (e._d) {
+                            updateDate(e._d, type)
+                        }
+                        handleClose()
+                    }}
+                />
+        </div>
+    )
+}
+
+export default DatePicker