add dev

2026-09-01 19:00:12 +03:30 · 2026-09-01 19:00:12 +03:30 · 10c6006112
commit 10c6006112
parent fbc2fa75ef
5 changed files with 102 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
 <!doctype html>
 <html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UI Kit Header Preview</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/dev/main.jsx"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -36,6 +36,8 @@
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "dev:header": "vite",
    "build": "yarn build:lib && yarn build:remote && yarn copy-types",
    "build:lib": "vite build",
    "build:remote": "vite build --mode remote",
--- a/src/dev/HeaderPreview.jsx
+++ b/src/dev/HeaderPreview.jsx
@ -0,0 +1,74 @@
 import {
  Box,
  ChakraProvider,
  Code,
  Container,
  Divider,
  Heading,
  Stack,
  Text,
 } from "@chakra-ui/react";
 import { Header } from "../layout/Header.jsx";
 import demoLogo from "./demo-logo.svg";
 function ActualHeader() {
  return (
    <Header>
      <Header.BrandSection>
        <Header.Logo src={demoLogo} />
        <Header.Brand>
          <Header.Title>سامانه نمونه هوش تجاری</Header.Title>
          {/* <Header.Description>
            پیش‌نمایش مستقیم کامپوننت Header از سورس UI Kit
          </Header.Description>*/}
        </Header.Brand>
      </Header.BrandSection>
      <Header.Bi />
    </Header>
  );
 }
 export default function HeaderPreview() {
  return (
    <ChakraProvider>
      <Box minH="100vh" bg="gray.50" dir="rtl">
        <ActualHeader />
        <Box borderTop="3px solid" borderColor="red.400" />
        <Container maxW="7xl" py={{ base: 5, lg: 8 }}>
          <Stack spacing={5}>
            <Box>
              <Heading size="md">Header Preview</Heading>
              <Text mt={2} color="gray.600">
                این صفحه خود کامپوننت واقعی <Code>src/layout/Header.jsx</Code> را
                render می‌کند. فایل Header را تغییر بده؛ Vite با HMR نتیجه را
                همان لحظه در مرورگر نمایش می‌دهد.
              </Text>
            </Box>
            <Divider />
            <Box p={5} bg="white" borderWidth="1px" borderRadius="lg">
              <Text fontWeight="bold">شروع محتوای صفحه</Text>
              <Text mt={2} color="gray.600">
                خط قرمز بالای این باکس دقیقاً انتهای Header است. اگر Header در
                flow طبیعی صفحه باشد، محتوا نباید زیر آن قرار بگیرد.
              </Text>
            </Box>
            <Box p={5} bg="white" borderWidth="1px" borderRadius="lg">
              <Text fontWeight="bold">تست Responsive</Text>
              <Text mt={2} color="gray.600">
                عرض مرورگر را کم و زیاد کن تا حالت‌های موبایل و دسکتاپ خود Header
                را ببینی.
              </Text>
            </Box>
          </Stack>
        </Container>
      </Box>
    </ChakraProvider>
  );
 }
--- a/src/dev/demo-logo.svg
+++ b/src/dev/demo-logo.svg
@ -0,0 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
  <rect width="96" height="96" rx="22" fill="#ffffff"/>
  <path d="M24 29h48v10H24zm0 18h34v10H24zm0 18h44v10H24z" fill="#4299E1"/>
  <circle cx="72" cy="52" r="10" fill="#90CDF4"/>
 </svg>
--- a/src/dev/main.jsx
+++ b/src/dev/main.jsx
@ -0,0 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import HeaderPreview from "./HeaderPreview.jsx";
 ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <HeaderPreview />
  </React.StrictMode>,
 );