59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
'use client';
|
|
import { PlansModel } from '@/models/plans.model';
|
|
import Table from '../Table';
|
|
import { v4 } from 'uuid';
|
|
import PresenceAnimator from '../../hox/PresenceAnimator';
|
|
import Option from '../Option';
|
|
import { useState } from 'react';
|
|
|
|
interface IProps {
|
|
plans: PlansModel;
|
|
}
|
|
|
|
const PlanTwo = ({ plans }: IProps) => {
|
|
const [planItem, setPlanItem] = useState<number | null>(null);
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<PresenceAnimator
|
|
initial={{ x: '100%', opacity: '0%' }}
|
|
animate={{
|
|
x: '0%',
|
|
opacity: '100%',
|
|
transition: { duration: 0.5 },
|
|
}}
|
|
exit={{ x: '-100%', opacity: '0%', transition: { duration: 0.5 } }}>
|
|
<h4 className="text-black text-[22px] font-roboto font-bold pt-6 border-t border-solid border-[#E7E7E7]">
|
|
Mahabat görnüşini we bukjasyny saýlaň!
|
|
</h4>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{plans.data.map((item) =>
|
|
item.on_radio ? (
|
|
<Option
|
|
activeId={planItem}
|
|
id={item.id}
|
|
onClick={(id) => setPlanItem(id)}
|
|
title={item.title}
|
|
description={item.description}
|
|
key={v4()}
|
|
/>
|
|
) : null,
|
|
)}
|
|
</div>
|
|
{/* {plans.data.map((plan) =>
|
|
plan.on_radio ? (
|
|
<Table
|
|
columns={plan.folder_table[0]}
|
|
data={plan.folder_table}
|
|
description={plan.description}
|
|
title={plan.title}
|
|
key={v4()}
|
|
/>
|
|
) : null
|
|
)} */}
|
|
</PresenceAnimator>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlanTwo;
|