generative_front/pages/index.js

import LlmPanel from "@/components/tabs/llmPanel";
import TextImagePanel from "@/components/tabs/textImagePanel";
import TextVideoPanel from "@/components/tabs/textVideoPanel";
import {
  Box,
  Flex,
  VStack,
  Text,
  Tabs,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Icon,
  Divider,
  HStack,
} from "@chakra-ui/react";
import {
  FiFileText,
  FiImage,
  FiVideo,
  FiLayers,
  FiSettings,
} from "react-icons/fi";
import { CiVideoOn } from "react-icons/ci";
import {
  IoDocumentTextOutline,
  IoImageOutline,
  IoVideocamOutline,
} from "react-icons/io5";
import { IoIosGitMerge } from "react-icons/io";

import {
  NumberParam,
  StringParam,
  useQueryParams,
  withDefault,
} from "use-query-params";
import { BsChatText } from "react-icons/bs";
// import { StringParam, useQueryParams, withDefault } from "use-query-params";

export default function Home() {
  const [filters, setFilters] = useQueryParams({
    tab: withDefault(NumberParam, 0),
    tab_menu: withDefault(StringParam, "llm"),
  });

  return (
    <Flex minH="100vh" bg="gray.50" dir="rtl">
      {/* Main Content */}
      <Box
        w="280px"
        bg="white"
        borderLeft="1px solid"
        borderColor="gray.200"
        px={6}
        py={8}
      >
        <VStack align="stretch" spacing={6}>
          {/* Brand / Title */}
          <Box>
            <Text fontSize="lg" fontWeight="bold">
              سرویس ها
            </Text>
            <Text fontSize="sm" color="gray.500">
              داشبورد تولید محتوا
            </Text>
          </Box>

          <Divider />

          {/* Menu */}
          <VStack align="stretch" spacing={2}>
            <SidebarItem
              icon={FiImage}
              label="LLM + LoRA"
              name={"llm"}
              active={filters?.tab_menu == "llm" ? true : false}
              filters={filters}
              setFilters={setFilters}
            />
            <SidebarItem
              icon={BsChatText}
              label="LLM Base"
              name={"llm_base"}
              active={filters?.tab_menu == "llm_base" ? true : false}
              filters={filters}
              setFilters={setFilters}
            />
            <SidebarItem
              icon={FiLayers}
              label="SDXL + LoRA"
              name={"sdxl_lora"}
              active={filters?.tab_menu == "sdxl_lora" ? true : false}
              filters={filters}
              setFilters={setFilters}
            />
            <SidebarItem
              icon={FiLayers}
              label="SDXL"
              name={"sdxl"}
              active={filters?.tab_menu == "sdxl" ? true : false}
              filters={filters}
              setFilters={setFilters}
            />
            <SidebarItem
              icon={CiVideoOn}
              label="CogVideo + LoRA"
              name={"cogvideo"}
              active={filters?.tab_menu == "cogvideo" ? true : false}
              filters={filters}
              setFilters={setFilters}
            />
            <SidebarItem
              icon={FiLayers}
              label="CogVideo Base"
              name={"cogvideo_base"}
              active={filters?.tab_menu == "cogvideo_base" ? true : false}
              filters={filters}
              setFilters={setFilters}
            />
          </VStack>

          {/* Footer */}
        </VStack>
      </Box>

      <Box flex="1" p={8}>
        <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>

      {/* Right Sidebar */}
    </Flex>
  );
}

function SidebarItem({
  icon,
  label,
  active = false,
  filters,
  setFilters,
  name,
}) {
  return (
    <Flex
      align="center"
      gap={3}
      px={4}
      py={3}
      borderRadius="lg"
      cursor="pointer"
      bg={active ? "purple.50" : "transparent"}
      color={active ? "purple.600" : "gray.700"}
      _hover={{
        bg: "purple.50",
        color: "purple.600",
      }}
      transition="all 0.2s"
      onClick={(e) => setFilters({ tab_menu: name })}
    >
      <Icon as={icon} boxSize={5} />
      <Text fontSize="md" fontWeight="medium">
        {label}
      </Text>
    </Flex>
  );
}