Mahyar Khanbolooki
110 lines
4.4 KiB
TypeScript
110 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import ToggleButton from '@/components/button/ToggleButton';
|
|
import TabContainer, { TabContainerClassNames, TabContainerRenderType } from '@/components/tab/TabContainer';
|
|
import { TabHeader } from '@/components/tab/TabHeader';
|
|
import { Button } from '@/components/ui/button';
|
|
import RateSelectionBar from '@/components/utils/RateSelectionBar';
|
|
import clsx from 'clsx';
|
|
import { useParams } from 'next/navigation';
|
|
import React from 'react'
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
type Props = object
|
|
|
|
type Params = {
|
|
orderId: string;
|
|
}
|
|
|
|
function RatingOrderIndex({ }: Props) {
|
|
const params: Params = useParams();
|
|
console.log(params);
|
|
const { t } = useTranslation("rating");
|
|
|
|
const badPoitns = () => {
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
|
|
{[...Array(6)].map((_, i) => (
|
|
<ToggleButton key={i} name={`weekness${i}`}>
|
|
{t(`Tabs.Weeknesses.Options.${i}`)}
|
|
</ToggleButton>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const goodPoitns = () => {
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
|
|
{[...Array(6)].map((_, i) => (
|
|
<ToggleButton key={i} name={`strength${i}`}>
|
|
{t(`Tabs.Strengths.Options.${i}`)}
|
|
</ToggleButton>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const formData = new FormData(e.currentTarget);
|
|
console.log(formData.get('rating'))
|
|
}
|
|
|
|
return (
|
|
<section className='flex flex-col h-full pt-6'>
|
|
<h1 className='font-medium'>{t("Heading")}</h1>
|
|
|
|
<form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
|
|
|
|
<div>
|
|
<div className='w-full'>
|
|
<RateSelectionBar name='rating' />
|
|
</div>
|
|
|
|
<div className='mt-10'>
|
|
<TabContainer
|
|
defaultIndex={1}
|
|
changeType={TabContainerRenderType.VISIBILITY}
|
|
className={{
|
|
...TabContainerClassNames,
|
|
wrapper: 'p-2!',
|
|
scrollView: clsx(
|
|
'border-none! rounded-xl! gap-0! h-full bg-[#EAECF0]! grid! grid-cols-2 px-2! py-2! pt-2!', TabContainerClassNames.scrollView
|
|
),
|
|
title: 'text-sm2! font-normal mt-1',
|
|
header: 'rounded-lg h-7! w-full',
|
|
headerActive: 'bg-primary',
|
|
titleActive: 'text-accent'
|
|
}}>
|
|
<TabHeader title={t("Tabs.Weeknesses.Title")} viewRenderer={badPoitns()}></TabHeader>
|
|
<TabHeader title={t("Tabs.Strengths.Title")} viewRenderer={goodPoitns()}></TabHeader>
|
|
</TabContainer>
|
|
<div className="w-full mt-6">
|
|
<label htmlFor='userOpinion'>{t("InputComment.Label")}</label>
|
|
<br />
|
|
<textarea name='userOpinion' id='userOpinion' placeholder={t("InputComment.Placeholder")} className='mt-2 w-full h-21 px-4 py-2.5 text-xs text-[#888888] rounded-xl border border-[#D0D0D0]' />
|
|
<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4 mt-6">
|
|
<Button type='submit' className='mt-auto rounded-xl font-normal cursor-pointer'>
|
|
{t("ButtonSubmit")}
|
|
</Button>
|
|
<Button type='submit' className='mt-auto rounded-xl bg-white cursor-pointer hover:bg-neutral-100 border border-foreground text-foreground font-normal'>
|
|
{t("ButtonCancel")}
|
|
</Button>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default RatingOrderIndex |