61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
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";
|
|
|
|
const categories = [
|
|
{ id: 1, title: "Medical", count: 5617813, icon: <SVGMedicine /> },
|
|
{
|
|
id: 2,
|
|
title: "Technics and Technology",
|
|
count: 5617813,
|
|
icon: <SVGTechnicsAndTechology />,
|
|
},
|
|
{ id: 3, title: "Fundamental", count: 5617813, icon: <SVGFundamental /> },
|
|
{ id: 4, title: "Humanitarian", count: 5617813, icon: <SVGHumanitarian /> },
|
|
{ id: 5, title: "Argicultural", count: 5617813, icon: <SVGAgricultural /> },
|
|
{ id: 6, title: "Social", count: 5617813, icon: <SVGSocials /> },
|
|
];
|
|
|
|
export function FeaturedArticles() {
|
|
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"
|
|
>
|
|
Featured articles
|
|
</Typography>
|
|
<Typography htmlTag="h2" className="text-base text-gray-500">
|
|
Select the category of science <br className="visible sm:hidden" />
|
|
you are interested in
|
|
</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>
|
|
);
|
|
}
|