56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
'use client';
|
|
import { Queries } from '@/api/queries';
|
|
import Loader from '@/components/Loader';
|
|
import { useContext, useEffect } 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';
|
|
|
|
const WindowOne = () => {
|
|
const ctx = useContext(StepsContext);
|
|
const { stepContext, propertyContext, data } = ctx;
|
|
const { properties } = data;
|
|
|
|
useEffect(() => {
|
|
Queries.getProperties().then((data) => properties.setProperties(data));
|
|
}, []);
|
|
|
|
if (!properties.properties) return <Loader height={200} />;
|
|
return (
|
|
<PresenceAnimator
|
|
initial={{ x: '100%', opacity: '0%' }}
|
|
animate={{ x: '0%', opacity: '100%', transition: { duration: 0.5 } }}
|
|
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]">
|
|
Eýeçiligiň görnüşini saýlaň!
|
|
</h2>
|
|
<div className="flex md:flex-row flex-col gap-[16px]">
|
|
{properties.properties.data.map((option) => (
|
|
<Option
|
|
onClick={(id) => propertyContext.setProperty(id)}
|
|
activeId={propertyContext.property}
|
|
id={option.id}
|
|
title={option.title}
|
|
description={option.description}
|
|
key={v4()}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={() => stepContext.setStep(2)}
|
|
name="Indiki"
|
|
type="button"
|
|
disabled={!propertyContext.property ? true : false}
|
|
/>
|
|
</div>
|
|
</PresenceAnimator>
|
|
);
|
|
};
|
|
|
|
export default WindowOne;
|