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

components/blogs/title/ItemTitle.js

@@ -3,17 +3,19 @@ import { Button } from "@mui/material"
 function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
 
     return (
-        <Button
-            className={`
-                !py-2 !px-4 !shadow-none !rounded-[8px]
+        <li>
+            <Button
+                className={`
+                !py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
                 ${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
             `}
-            onClick={() => setActiveBtn(idx)}
-            variant="contained"
-            color="secondary"
-        >
-            {name}
-        </Button>
+                onClick={() => setActiveBtn(idx)}
+                variant="contained"
+                color="secondary"
+            >
+                {name}
+            </Button>
+        </li>
     )
 }
 

components/blogs/title/index.js

@@ -9,7 +9,7 @@ function Title() {
     const [activeBtn, setActiveBtn] = useState(0);
 
     return (
-        <div className="flex items-center justify-start gap-4">
+        <ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
             {listTitle.map((name, idx) => (
                 <ItemTitle
                     setActiveBtn={setActiveBtn}
@@ -19,7 +19,7 @@ function Title() {
                     key={idx}
                 />
             ))}
-        </div>
+        </ul>
     )
 }