129 lines
3.4 KiB
JavaScript
129 lines
3.4 KiB
JavaScript
import React from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import Profile from "../../components/Tenanat/profile";
|
|
|
|
const TenantDetails = () => {
|
|
|
|
const tabs = [
|
|
{
|
|
id: "navs-left-home",
|
|
label: "Profile",
|
|
icon: "bx bx-user-circle",
|
|
iconSize: "bx-sm",
|
|
content: <Profile/>,
|
|
},
|
|
{
|
|
id: "navs-left-org",
|
|
label: "Organization",
|
|
icon: "bx bxs-business",
|
|
iconSize: "bx-sm", // change to bx-xs, bx-md, bx-lg
|
|
content: (
|
|
<>
|
|
<p>
|
|
Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake...
|
|
</p>
|
|
<p className="mb-0">
|
|
Tootsie roll fruitcake cookie. Dessert topping pie...
|
|
</p>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "navs-left-profile",
|
|
label: "Settings",
|
|
icon: "bx bx-cog",
|
|
iconSize: "bx-sm",
|
|
content: (
|
|
<>
|
|
<p>
|
|
Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie...
|
|
</p>
|
|
<p className="mb-0">
|
|
Jelly-o jelly beans icing pastry cake cake lemon drops...
|
|
</p>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "navs-left-messages",
|
|
label: "Messages",
|
|
icon: "bx bx-message-rounded",
|
|
iconSize: "bx-sm",
|
|
content: (
|
|
<>
|
|
<p>
|
|
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
|
|
</p>
|
|
<p className="mb-0">
|
|
Cake chocolate bar cotton candy apple pie tootsie roll...
|
|
</p>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
id: "navs-left-bill",
|
|
label: "Bill",
|
|
icon: "bx bx-receipt",
|
|
iconSize: "bx-sm",
|
|
content: (
|
|
<>
|
|
<p>
|
|
Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
|
|
</p>
|
|
<p className="mb-0">
|
|
Cake chocolate bar cotton candy apple pie tootsie roll...
|
|
</p>
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="container-fluid py-0">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Tenant", link: "/tenant" },
|
|
{ label: "Tenant Details", link: null },
|
|
]}
|
|
/>
|
|
|
|
<div className="nav-align-left nav-tabs-shadow mb-6">
|
|
<ul className="nav nav-tabs py-2 page-min-h" role="tablist">
|
|
{tabs.map((tab, index) => (
|
|
<li key={tab.id} className="nav-item">
|
|
<button
|
|
type="button"
|
|
className={`nav-link d-flex align-items-center gap-2 ${index === 0 ? "active" : ""}`}
|
|
role="tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target={`#${tab.id}`}
|
|
aria-controls={tab.id}
|
|
aria-selected={index === 0}
|
|
>
|
|
{tab.icon && <i className={`${tab.icon} ${tab.iconSize}`} />}
|
|
{tab.label}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="tab-content">
|
|
{tabs.map((tab, index) => (
|
|
<div
|
|
key={tab.id}
|
|
className={`tab-pane fade ${index === 0 ? "show active" : ""} text-start`}
|
|
id={tab.id}
|
|
>
|
|
{tab.content}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TenantDetails;
|