Merge pull request #58 from OCA-UFCG/chore/theme-cards

Update the design for the "Explore nossos dados" section

Author: RodrigoEC

public/sprite.svg

@@ -3,6 +3,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+  /* Palette */
   --color-green-neutro: #D6E9DB;
   --color-green-100: #EEFFF3;
   --color-green-200: #D6FFE6;

src/app/globals.css

@@ -5,8 +5,8 @@ import { SectionHeader } from "@/utils/interfaces";
 import { AboutSection } from "@/components/About/About";
 import { RecentSection } from "@/components/RecentSection/RecentSection";
 import PreviewSection from "@/components/PreviewSection/PreviewSection";
-import PanelSection from "@/components/PanelCard/Section/PanelSection";
 import BannerImage from "@/components/BannerImage/BannerImage";
+import DataSection from "@/components/DataSection/DataSection";
 
 export const revalidate = 60;
 
@@ -17,13 +17,14 @@ export default async function Home() {
     sectionHead,
     post: posts,
     previewCards,
-    panels,
+    theme,
   } = await getContent([
     "partners",
     "sectionHead",
     "post",
     "previewCards",
     "panels",
+    "theme",
   ]);
 
   return (
@@ -42,12 +43,13 @@ export default async function Home() {
             section.fields.id === "about",
         )}
       />
-      <PanelSection
+      <DataSection
         header={sectionHead.find(
           (sec: { fields: SectionHeader }) => sec.fields.id == "panels",
         )}
-        panels={panels}
+        categories={theme}
       />
+
       <ProjectSection
         header={sectionHead.find(
           (sec: { fields: SectionHeader }) => sec.fields.id == "projects",

src/app/page.tsx

@@ -0,0 +1,33 @@
+import { MacroTheme } from "@/utils/interfaces";
+import { Icon } from "@/components/Icon/Icon";
+import { macroThemes } from "@/utils/constants";
+import Link from "next/link";
+
+const CategoryCard = ({ category }: { category: { fields: MacroTheme } }) => {
+  return (
+    <Link
+      href={`/posts?category=${category.fields.id}`}
+      className="flex justify-between items-center rounded-sm shadow-sm p-4 w-full bg-grey-100 hover:bg-grey-200 border border-grey-200 hover:border-grey-300 cursor-pointer transition duration-300"
+      key={category.fields.id}
+    >
+      <div className="flex flex-col md:flex-row w-full md:w-fit items-center justify-center gap-4">
+        <div
+          className="flex items-center justify-center rounded-sm min-w-[40px] w-[40px] h-[40px]"
+          style={{ backgroundColor: category.fields.color }}
+        >
+          <Icon
+            className="text-white"
+            id={macroThemes[category.fields.id]}
+            size={20}
+          />
+        </div>
+        <span className="text-base text-center md:text-start font-semibold md:max-w-[90%]">
+          {category.fields.name}
+        </span>
+      </div>
+      <Icon className="hidden md:flex rotate-270" id="expand" size={9} />
+    </Link>
+  );
+};
+
+export default CategoryCard;

src/components/CategoryCard/CategoryCard.tsx

@@ -0,0 +1,61 @@
+import { MacroTheme, SectionHeader } from "@/utils/interfaces";
+import { Icon } from "@/components/Icon/Icon";
+import { LinkButton } from "@/components/LinkButton/LinkButton";
+import CategoryCard from "../CategoryCard/CategoryCard";
+
+const DataSection = ({
+  header,
+  categories,
+}: {
+  header?: { fields: SectionHeader };
+  categories?: { fields: MacroTheme }[];
+}) => {
+  const { title, subtitle } = header?.fields || {
+    title: "",
+    subtitle: "",
+  };
+
+  const filteredData = categories?.sort((a, b) => {
+    if (a.fields.id < b.fields.id) {
+      return -1;
+    }
+    if (a.fields.id > b.fields.id) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  return (
+    <section
+      className="w-full max-w-[1440px] px-4 py-6 content-center flex flex-col gap-6 box-border"
+      id={title}
+    >
+      <div className="flex flex-col gap-3">
+        <div className="flex justify-between w-full">
+          <h2 className="text-3xl font-semibold">{title}</h2>
+          <LinkButton
+            href="/posts"
+            variant="secondary"
+            className="w-fit hidden md:flex"
+          >
+            <p>Ver Todos</p>
+            <Icon className="rotate-270 size-2" id="expand" />
+          </LinkButton>
+        </div>
+        <p className="text-sm">{subtitle}</p>
+      </div>
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        {filteredData?.map((category: { fields: MacroTheme }) => (
+          <CategoryCard key={category.fields.id} category={category} />
+        ))}
+      </div>
+      <LinkButton href="/posts" variant="secondary" className="md:hidden">
+        <p>Ver Todos</p>
+        <Icon className="rotate-270 size-2" id="expand" />
+      </LinkButton>
+    </section>
+  );
+};
+
+export default DataSection;