45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import StepsContext from '@/context/StepsContext';
|
||
|
|
import { useContext } from 'react';
|
||
|
|
|
||
|
|
interface IOption {
|
||
|
|
title: string;
|
||
|
|
description?: string | null;
|
||
|
|
id: number;
|
||
|
|
activeId: number | null;
|
||
|
|
onClick: (id: number) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Option = ({ title, description, id, onClick, activeId }: IOption) => {
|
||
|
|
console.log(title);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => onClick(id)}
|
||
|
|
style={id === activeId ? { background: '#121268', color: 'white' } : {}}
|
||
|
|
className="cursor-pointer overflow-hidden font-roboto leading-[22px] flex flex-col justify-center items-center gap-[12px] max-w-[400px] bg-[#E7E7E7] border-[1px] border-[#BBBBBB] rounded-[5px] px-[12px] py-[24px] hover:border-[#37ABE1] transition-all">
|
||
|
|
<h2
|
||
|
|
className="md:min-h-[68px] font-bold text-[22px] md:pb-[22px] pb-4 border-b-[#BBBBBB] border-b-[1px]"
|
||
|
|
style={
|
||
|
|
!description
|
||
|
|
? {
|
||
|
|
border: 'none',
|
||
|
|
paddingBottom: 0,
|
||
|
|
padding: '34px 0',
|
||
|
|
minHeight: 'unset',
|
||
|
|
textAlign: 'center',
|
||
|
|
}
|
||
|
|
: {}
|
||
|
|
}>
|
||
|
|
{title}
|
||
|
|
</h2>
|
||
|
|
<p
|
||
|
|
className="text-[18px] w-full"
|
||
|
|
style={!description ? { display: 'none' } : {}}
|
||
|
|
dangerouslySetInnerHTML={{ __html: description || '' }}></p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Option;
|