61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { Divider, Steps } from "antd";
|
||
import React, { useState } from "react";
|
||
import { useTabsState } from "../../../../zustand/TabsState";
|
||
import { useModalTabsState } from "../../../../zustand/ModalTabsState";
|
||
import Form from "./Form";
|
||
import TabsBar from "../../../../Components/Layout/Tabs/TabsBar";
|
||
import ActiveTabs from "../../../../Components/Layout/Tabs/ActiveTabs";
|
||
|
||
const ModelBody = () => {
|
||
const { ActiveTab, setActiveTab } = useModalTabsState((state) => state);
|
||
function handelTabClick(index: number) {
|
||
setActiveTab(index);
|
||
}
|
||
|
||
const steps = [
|
||
{
|
||
title: "الخطوة 1",
|
||
description: "التفاصيل الشخصية",
|
||
component: <Form />,
|
||
},
|
||
{
|
||
title: "الخطوة 2",
|
||
description: "التفاصيل الشخصية",
|
||
component: <>H2</>,
|
||
},
|
||
{
|
||
title: "الخطوة 3",
|
||
description: "التفاصيل الشخصية",
|
||
component: <>H2</>,
|
||
},
|
||
{
|
||
title: "الخطوة 4",
|
||
description: "التفاصيل الشخصية",
|
||
component: <>H2</>,
|
||
},
|
||
{
|
||
title: "الخطوة 5",
|
||
description: "التفاصيل الشخصية",
|
||
component: <>H2</>,
|
||
},
|
||
{
|
||
title: "الخطوة 5",
|
||
description: "التفاصيل الشخصية",
|
||
component: <>H2</>,
|
||
hidden: true,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="ModelBody">
|
||
<TabsBar steps={steps} />
|
||
<div className="ModelBodyForm">
|
||
<header>إضافة طالب</header>
|
||
<ActiveTabs steps={steps} />
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ModelBody;
|