66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import routes from "@/routes";
|
|
import styles from "./styles.module.css";
|
|
import MainButton from "../MainButton";
|
|
import Title from "../Title";
|
|
import { useApi, useApiCall } from "@/api";
|
|
import { useCallback } from "react";
|
|
import { Asset } from "@/api/resources/Assets";
|
|
|
|
function FeedbackPage(): JSX.Element {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const api = useApi();
|
|
const handleNext = () => navigate(routes.client.freePeriodInfo());
|
|
|
|
const assetsData = useCallback(async () => {
|
|
const { assets } = await api.getAssets({ category: String("au") });
|
|
return assets;
|
|
}, [api]);
|
|
|
|
const {
|
|
data: assets,
|
|
// isPending
|
|
} = useApiCall<Asset[]>(assetsData);
|
|
|
|
const reviews = [
|
|
{
|
|
title: t("aura.name_1.review"),
|
|
text: t("aura.review_1.content"),
|
|
imageKey: "au.1.avatar",
|
|
},
|
|
{
|
|
title: t("aura.name_2.review"),
|
|
text: t("aura.review_2.content"),
|
|
imageKey: "au.2.avatar",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<div className={styles.reviews}>
|
|
{reviews.map(({ title, text, imageKey }, index) => (
|
|
<div className={styles.review} key={index}>
|
|
<div className={styles.images}>
|
|
<img
|
|
className={styles["profile-picture"]}
|
|
src={assets?.find((asset) => asset.key === imageKey)?.url}
|
|
alt="profile picture"
|
|
/>
|
|
<div className={styles["header-container"]}>
|
|
<Title variant="h3">{title}</Title>
|
|
<img className={styles.stars} src="/5-stars.png" alt="stop" />
|
|
</div>
|
|
</div>
|
|
<p className={styles.text}>{text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<MainButton onClick={handleNext}>{t("next")}</MainButton>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default FeedbackPage;
|