102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { Queries } from '@/api/queries';
|
|
import Loader from '@/components/Loader';
|
|
import { useContext, useEffect, useState } from 'react';
|
|
import Option from '../Option';
|
|
import { v4 } from 'uuid';
|
|
import Button from '@/components/Button';
|
|
import StepsContext from '@/context/StepsContext';
|
|
import PresenceAnimator from '@/components/hox/PresenceAnimator';
|
|
import { PlansModel } from '@/models/plans.model';
|
|
// import PlanOne from "../plans/PlanOne";
|
|
// import PlanTwo from "../plans/PlanTwo";
|
|
// import PlanThree from "../plans/PlanThree";
|
|
// import PlanFour from "../plans/PlanFour";
|
|
import { AnimatePresence } from 'framer-motion';
|
|
import Plan from '../plans/Plan';
|
|
|
|
const WindowTwo = () => {
|
|
const planTypes = [
|
|
{
|
|
id: 1,
|
|
name: 'TV',
|
|
property: 'on_tv',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Radio',
|
|
property: 'on_radio',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Air ticket flyer',
|
|
property: 'on_sub',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Website',
|
|
property: 'on_web',
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Outdoor LED',
|
|
property: 'on_outside_monitors',
|
|
},
|
|
];
|
|
const ctx = useContext(StepsContext);
|
|
const { stepContext, propertyContext, data } = ctx;
|
|
const { plans } = data;
|
|
const { plan, setPlan } = useContext(StepsContext).plansContext;
|
|
|
|
useEffect(() => {
|
|
Queries.getPlans(propertyContext.property!).then((data) => plans.setPlans(data));
|
|
}, [propertyContext.property]);
|
|
|
|
useEffect(() => {}, []);
|
|
|
|
// console.log('Plans', plans);
|
|
// console.log('Plan', plan);
|
|
|
|
if (!plans.plans) return <Loader height={200} />;
|
|
return (
|
|
<PresenceAnimator
|
|
initial={{ x: '100%', opacity: '0%' }}
|
|
animate={{
|
|
x: '0%',
|
|
opacity: '100%',
|
|
transition: { duration: 0.5, delay: 0.6 },
|
|
}}
|
|
exit={{ x: '-100%', opacity: '0%', transition: { duration: 0.5 } }}>
|
|
<div className="flex flex-col gap-10">
|
|
<div className="flex flex-col gap-[24px] mt-[36px]">
|
|
<h2 className="font-mw_sans font-bold md:text-[22px] text-lg leading-[24px]">
|
|
Mahabat görnüşini we bukjasyny saýlaň!
|
|
</h2>
|
|
<div className="md:grid md:grid-cols-5 flex flex-col gap-[8px]">
|
|
{planTypes.map((option) => (
|
|
<Option
|
|
onClick={(id) => setPlan(id)}
|
|
activeId={plan}
|
|
id={option.id}
|
|
title={option.name}
|
|
key={v4()}
|
|
/>
|
|
// <Option
|
|
// onClick={() => setPlan(option.id)}
|
|
// activeId={plan}
|
|
// id={option.id}
|
|
// title={option.name}
|
|
// key={v4()}
|
|
// />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Plan />
|
|
</div>
|
|
</PresenceAnimator>
|
|
);
|
|
};
|
|
|
|
export default WindowTwo;
|