64 lines
2.3 KiB
TypeScript
Executable File
64 lines
2.3 KiB
TypeScript
Executable File
import React, { useMemo } from "react";
|
|
import Typography from "components/typography/Typography";
|
|
import CategoryCard from "components/Cards/CategoryCard";
|
|
import {
|
|
SVGMedicine,
|
|
SVGAgricultural,
|
|
SVGHumanitarian,
|
|
SVGSocials,
|
|
SVGTechnicsAndTechology,
|
|
SVGFundamental,
|
|
} from "components/icons";
|
|
import { useTranslation} from "react-i18next";
|
|
|
|
const categories = [
|
|
{ id: 1, title: "mainPage.featuredArticles.categories.Medical", count: 5617813, icon: <SVGMedicine /> },
|
|
{
|
|
id: 2,
|
|
title: "mainPage.featuredArticles.categories.TechnicsAndTechlonogies",
|
|
count: 5617813,
|
|
icon: <SVGTechnicsAndTechology />,
|
|
},
|
|
{ id: 3, title: "mainPage.featuredArticles.categories.Fundamental", count: 5617813, icon: <SVGFundamental /> },
|
|
{ id: 4, title: "mainPage.featuredArticles.categories.Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
|
|
{ id: 5, title: "mainPage.featuredArticles.categories.Agricultural", count: 5617813, icon: <SVGAgricultural /> },
|
|
{ id: 6, title: "mainPage.featuredArticles.categories.Social", count: 5617813, icon: <SVGSocials /> },
|
|
];
|
|
|
|
export function FeaturedArticlesCategories() {
|
|
const [t, i18next] = useTranslation();
|
|
|
|
const categoryCards = useMemo(
|
|
() =>
|
|
categories.map((category) => (
|
|
<CategoryCard
|
|
title={category.title}
|
|
count={category.count}
|
|
iconChild={category.icon}
|
|
/>
|
|
)),
|
|
categories
|
|
);
|
|
|
|
return (
|
|
<section className="w-full items-center justify-center">
|
|
<div className="pt-14 lg:pt-16 pb-4 md:pb-8 text-center">
|
|
<Typography
|
|
htmlTag="h1"
|
|
fontWeightVariant="semibold"
|
|
className="text-3xl mb-2"
|
|
>
|
|
{t("mainPage.featuredArticles.title")}
|
|
</Typography>
|
|
<Typography htmlTag="h2" className="text-base text-gray-500">
|
|
{t("mainPage.featuredArticles.descriptionPart1")}<br className="visible sm:hidden" />
|
|
{t("mainPage.featuredArticles.descriptionPart2")}
|
|
</Typography>
|
|
</div>
|
|
<div className="py-8 px-10 flex md:flex justify-start md:justify-center md:flex-wrap overflow-x-scroll md:overflow-hidden snap-x scroll-smooth overscroll-x-contain">
|
|
{categoryCards}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|