page blogs title and head and list article & change footer hover mode

2024-07-12 16:52:16 +03:30
parent c052e2d55e
commit 7b825e52c0
26 changed files with 263 additions and 5 deletions
@@ -0,0 +1,20 @@
+import { Button } from "@mui/material"
+
+function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
+
+    return (
+        <Button
+            className={`
+                !py-2 !px-4 !shadow-none !rounded-[8px]
+                ${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
+            `}
+            onClick={() => setActiveBtn(idx)}
+            variant="contained"
+            color="secondary"
+        >
+            {name}
+        </Button>
+    )
+}
+
+export default ItemTitle
@@ -0,0 +1,26 @@
+'use client';
+import { useState } from "react";
+import ItemTitle from "./ItemTitle";
+
+const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
+
+function Title() {
+
+    const [activeBtn, setActiveBtn] = useState(0);
+
+    return (
+        <div className="flex items-center justify-start gap-4">
+            {listTitle.map((name, idx) => (
+                <ItemTitle
+                    setActiveBtn={setActiveBtn}
+                    activeBtn={activeBtn}
+                    name={name}
+                    idx={idx}
+                    key={idx}
+                />
+            ))}
+        </div>
+    )
+}
+
+export default Title