add

pages/index.js

@@ -14,6 +14,8 @@ import {
   Icon,
   Divider,
   HStack,
+  Image,
+  Stack,
 } from "@chakra-ui/react";
 import {
   FiFileText,
@@ -43,6 +45,7 @@ export default function Home() {
   const [filters, setFilters] = useQueryParams({
     tab: withDefault(NumberParam, 0),
     tab_menu: withDefault(StringParam, "llm"),
+    model_name: withDefault(NumberParam, 0),
   });
 
   return (
@@ -53,12 +56,11 @@ export default function Home() {
         bg="white"
         borderLeft="1px solid"
         borderColor="gray.200"
-        px={6}
         py={8}
       >
         <VStack align="stretch" spacing={6}>
           {/* Brand / Title */}
-          <Box>
+          <Box px={6}>
             <Text fontSize="lg" fontWeight="bold">
               سرویس ها
             </Text>
@@ -70,7 +72,14 @@ export default function Home() {
           <Divider />
 
           {/* Menu */}
-          <Tabs isFitted variant="soft-rounded" colorScheme="green">
+          <Tabs
+            isFitted
+            variant="soft-rounded"
+            colorScheme="green"
+            px={6}
+            onChange={(e) => setFilters({ model_name: e })}
+            index={filters?.model_name}
+          >
             <TabList>
               <Tab>خانم ستاری</Tab>
               <Tab>رکن آبادی</Tab>
@@ -188,54 +197,74 @@ export default function Home() {
         </VStack>
       </Box>
 
-      <Box flex="1" p={8}>
-        <Tabs
-          variant="soft-rounded"
-          colorScheme="purple"
-          onChange={(e) => setFilters({ tab: e })}
-          index={filters?.tab}
+      <VStack w={"100%"} alignItems={"start"}>
+        <Box
+          w={"100%"}
+          h={"92px"}
+          borderBottom={"1px"}
+          borderBottomColor={"gray.200"}
+          bgColor={"white"}
+          as={Stack}
+          alignItems={"end"}
+          justifyContent={"center"}
+          pl={"20px"}
         >
-          <TabList mb={6}>
-            <Tab>
-              <HStack>
-                <IoDocumentTextOutline fontSize={"20px"} />
-                <Text>پنل تولید متن</Text>
-              </HStack>
-            </Tab>
-            <Tab>
-              <HStack>
-                <IoImageOutline fontSize={"20px"} />
-                <Text>پنل تولید تصویر</Text>
-              </HStack>
-            </Tab>
-            <Tab>
-              <HStack>
-                <IoVideocamOutline fontSize={"20px"} />
-                <Text>پنل تولید ویدئو</Text>
-              </HStack>
-            </Tab>
-            <Tab>
-              <HStack>
-                <IoIosGitMerge fontSize={"20px"} />
-                <Text>مرج و تولید نهایی</Text>
-              </HStack>
-            </Tab>
-          </TabList>
+          <VStack>
+            <Image src={"./logob.png"} />
+            <Text fontSize={"xs"} fontWeight={"bold"}>
+              موسسه تولید سیستم های خبره و هوشمند اسلامی باقرالعلوم(ع)
+            </Text>
+          </VStack>
+        </Box>
+        <Box flex="1" p={8} w={"100%"}>
+          <Tabs
+            variant="soft-rounded"
+            colorScheme="purple"
+            onChange={(e) => setFilters({ tab: e })}
+            index={filters?.tab}
+          >
+            <TabList mb={6}>
+              <Tab>
+                <HStack>
+                  <IoDocumentTextOutline fontSize={"20px"} />
+                  <Text>پنل تولید متن</Text>
+                </HStack>
+              </Tab>
+              <Tab>
+                <HStack>
+                  <IoImageOutline fontSize={"20px"} />
+                  <Text>پنل تولید تصویر</Text>
+                </HStack>
+              </Tab>
+              <Tab>
+                <HStack>
+                  <IoVideocamOutline fontSize={"20px"} />
+                  <Text>پنل تولید ویدئو</Text>
+                </HStack>
+              </Tab>
+              <Tab>
+                <HStack>
+                  <IoIosGitMerge fontSize={"20px"} />
+                  <Text>مرج و تولید نهایی</Text>
+                </HStack>
+              </Tab>
+            </TabList>
 
-          <TabPanels>
-            <TabPanel>
-              <LlmPanel />
-            </TabPanel>
-            <TabPanel>
-              <TextImagePanel />
-            </TabPanel>
-            <TabPanel>
-              <TextVideoPanel />
-            </TabPanel>
-            <TabPanel>مرج نهایی</TabPanel>
-          </TabPanels>
-        </Tabs>
-      </Box>
+            <TabPanels>
+              <TabPanel>
+                <LlmPanel />
+              </TabPanel>
+              <TabPanel>
+                <TextImagePanel />
+              </TabPanel>
+              <TabPanel>
+                <TextVideoPanel />
+              </TabPanel>
+              <TabPanel>مرج نهایی</TabPanel>
+            </TabPanels>
+          </Tabs>
+        </Box>
+      </VStack>
 
       {/* Right Sidebar */}
     </Flex>