CHIEFSOFT\ameye
71 lines
2.1 KiB
React
71 lines
2.1 KiB
React
'use client'
|
|
|
|
import Image from "next/image";
|
|
import React from "react";
|
|
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
|
|
|
const DocAsTabs = () => {
|
|
return (
|
|
<>
|
|
<Tabs>
|
|
<TabList>
|
|
<Tab>
|
|
<div className="d-flex align-items-center">
|
|
<Image width="17" height="18" src="/images/icon/90.svg" alt="icon" />
|
|
<p>Team Box</p>
|
|
</div>
|
|
</Tab>
|
|
{/* End .d-felx */}
|
|
<Tab>
|
|
<div className="d-flex align-items-center ">
|
|
<Image width="17" height="18" src="/images/icon/91.svg" alt="icon" />
|
|
<p>Project & Task</p>
|
|
</div>
|
|
</Tab>
|
|
{/* End .d-felx */}
|
|
<Tab>
|
|
<div className="d-flex align-items-center">
|
|
<Image width={18} height={18} src="/images/icon/92.svg" alt="icon" />
|
|
<p>Note & Docs</p>
|
|
</div>
|
|
</Tab>
|
|
{/* End .d-felx */}
|
|
</TabList>
|
|
|
|
<div className="mt-50 sm-mt-30">
|
|
<TabPanel>
|
|
<Image width={1155} height={685} style={{height:'fit-content'}}
|
|
src="/images/assets/screen_11.png"
|
|
alt="screen"
|
|
className="m-auto"
|
|
data-aos="fade"
|
|
data-aos-duration="1200"
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<Image width={1155} height={685} style={{height:'fit-content'}}
|
|
src="/images/assets/screen_15.png"
|
|
alt="screen"
|
|
className="m-auto"
|
|
data-aos="fade"
|
|
data-aos-duration="1200"
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel>
|
|
<Image width={1155} height={685} style={{height:'fit-content'}}
|
|
src="/images/assets/screen_16.png"
|
|
alt="screen"
|
|
className="m-auto"
|
|
data-aos="fade"
|
|
data-aos-duration="1200"
|
|
/>
|
|
</TabPanel>
|
|
</div>
|
|
{/* /.pricing-table-area-six */}
|
|
</Tabs>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DocAsTabs;
|