diff --git a/index.html b/index.html
new file mode 100644
index 0000000..785c9cc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ UI Kit Header Preview
+
+
+
+
+
+
diff --git a/package.json b/package.json
index cccb3c7..858f2a9 100644
--- 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",
diff --git a/src/dev/HeaderPreview.jsx b/src/dev/HeaderPreview.jsx
new file mode 100644
index 0000000..4de4a8b
--- /dev/null
+++ 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 از سورس UI Kit
+ */}
+
+
+
+
+
+ );
+}
+
+export default function HeaderPreview() {
+ return (
+
+
+
+
+
+
+
+
+
+ Header Preview
+
+ این صفحه خود کامپوننت واقعی src/layout/Header.jsx را
+ render می‌کند. فایل Header را تغییر بده؛ Vite با HMR نتیجه را
+ همان لحظه در مرورگر نمایش می‌دهد.
+
+
+
+
+
+
+ شروع محتوای صفحه
+
+ خط قرمز بالای این باکس دقیقاً انتهای Header است. اگر Header در
+ flow طبیعی صفحه باشد، محتوا نباید زیر آن قرار بگیرد.
+
+
+
+
+ تست Responsive
+
+ عرض مرورگر را کم و زیاد کن تا حالت‌های موبایل و دسکتاپ خود Header
+ را ببینی.
+
+
+
+
+
+
+ );
+}
diff --git a/src/dev/demo-logo.svg b/src/dev/demo-logo.svg
new file mode 100644
index 0000000..0d3844d
--- /dev/null
+++ b/src/dev/demo-logo.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/dev/main.jsx b/src/dev/main.jsx
new file mode 100644
index 0000000..c59614d
--- /dev/null
+++ 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(
+
+
+ ,
+);