feat: add imagedownload, downloadbutton, kleroslogosection, logospackagesection components

Author: kemuru

frontend/src/app/brand-assets/page.tsx

@@ -1,17 +1,35 @@
 import Hero from "@/components/BrandAssets/Hero";
-// import TabSection from "@/components/BrandAssets/TabSection";
+import KlerosLogoSection from "@/components/BrandAssets/KlerosLogoSection";
+import LogosPackageSection from "@/components/BrandAssets/LogosPackageSection";
 import { heroQuery, HeroQueryType } from "@/queries/brand-assets/hero";
-// import { tabSectionQuery, TabSectionQueryType } from "@/queries/brand-assets/tabs-data";
+import {
+  klerosLogoSectionQuery,
+  KlerosLogoSectionQueryType,
+} from "@/queries/brand-assets/kleros-logo-section";
+import {
+  logosPackageSectionQuery,
+  LogosPackageSectionQueryType,
+} from "@/queries/brand-assets/logos-package-section";
 import { request } from "@/utils/graphQLClient";
 
 const BrandAssets: React.FC = async () => {
   const heroData = await request<HeroQueryType>(heroQuery);
-  // const tabsData = await request<TabSectionQueryType>(tabSectionQuery);
+  const logosPackageData = await request<LogosPackageSectionQueryType>(
+    logosPackageSectionQuery,
+  );
+  const klerosLogoSection = await request<KlerosLogoSectionQueryType>(
+    klerosLogoSectionQuery,
+  );
 
   return (
     <>
       <Hero {...{ heroData: heroData.brandAssetsPageHero }} />
-      {/* <TabSection {...{ tabsData }} /> */}
+      <LogosPackageSection
+        logosPackageData={logosPackageData.brandAssetsPageLogosPackageSection}
+      />
+      <KlerosLogoSection
+        klerosLogoData={klerosLogoSection.brandAssetsPageKlerosLogoSection}
+      />
     </>
   );
 };

frontend/src/assets/svgs/icons/download.svg

@@ -0,0 +1,28 @@
+import { KlerosLogoSectionQueryType } from "@/queries/brand-assets/kleros-logo-section";
+
+import ImageDownload from "../ImageDownload";
+
+interface IKlerosLogoSection {
+  klerosLogoData: KlerosLogoSectionQueryType["brandAssetsPageKlerosLogoSection"];
+}
+
+const KlerosLogoSection: React.FC<IKlerosLogoSection> = ({
+  klerosLogoData,
+}) => {
+  return (
+    <div className="relative bg-background-1 px-6 pb-12 pt-32">
+      <div className="space-y-6">
+        <h1 className="w-min text-3xl">{klerosLogoData.header}</h1>
+        <div className="flex flex-row flex-wrap justify-center gap-8">
+          {klerosLogoData.imageDownloads.map((imageDownload) => {
+            return (
+              <ImageDownload key={imageDownload.name} {...{ imageDownload }} />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default KlerosLogoSection;

frontend/src/components/BrandAssets/KlerosLogoSection.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+
+import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section";
+
+import Button from "../Button";
+import ExternalLink from "../ExternalLink";
+
+interface ILogosPackageSection {
+  logosPackageData: LogosPackageSectionQueryType["brandAssetsPageLogosPackageSection"];
+}
+
+const LogosPackageSection: React.FC<ILogosPackageSection> = ({
+  logosPackageData,
+}) => {
+  return (
+    <div className="relative bg-background-2 px-6 pb-12 pt-32">
+      <div className="space-y-6">
+        <h1 className="w-min text-3xl">{logosPackageData.header}</h1>
+        <p className="text-lg">{logosPackageData.subtitle}</p>
+        <div>
+          <Link
+            href={logosPackageData.button?.link?.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button variant="primary">
+              <span className="text-background-2">
+                {logosPackageData.button?.text}
+              </span>
+            </Button>
+          </Link>
+        </div>
+        <ExternalLink
+          url={logosPackageData.arrowLink.link.url}
+          text={logosPackageData.arrowLink.text}
+          className="z-[1] flex-wrap"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LogosPackageSection;

frontend/src/components/BrandAssets/LogosPackageSection.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import React from "react";
+
+import clsx from "clsx";
+import Image from "next/image";
+
+import DownloadIcon from "@/assets/svgs/icons/download.svg";
+
+const baseStyle = clsx("px-4 py-1 rounded transition duration-75");
+
+const primaryStyle = clsx(
+  baseStyle,
+  "bg-primary-blue",
+  "hover:bg-primary-blue/90",
+  "disabled:bg-stroke",
+  "text-background-2",
+);
+
+interface IDownloadButton {
+  name: string;
+  url: string;
+}
+
+const DownloadButton: React.FC<IDownloadButton> = ({ name, url }) => {
+  const handleDownload = async () => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error("Failed to fetch the file.");
+
+      const blob = await response.blob();
+      const blobUrl = window.URL.createObjectURL(blob);
+      const filename = url.split("/").pop() || "download";
+
+      const link = Object.assign(document.createElement("a"), {
+        href: blobUrl,
+        download: filename,
+      });
+
+      link.click();
+      window.URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error("Error downloading the file:", error);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDownload}
+      className={clsx(primaryStyle, "flex flex-row gap-2")}
+    >
+      {name}
+      <Image src={DownloadIcon} alt={name} width="14" height="14" />
+    </button>
+  );
+};
+
+export default DownloadButton;

frontend/src/components/DownloadButton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+import Image from "next/image";
+
+import { ImageDownloadType } from "@/queries/brand-assets/kleros-logo-section";
+
+import DownloadButton from "./DownloadButton";
+
+interface IImageDownload {
+  imageDownload: ImageDownloadType;
+}
+
+const ImageDownload: React.FC<IImageDownload> = ({ imageDownload }) => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Image src={imageDownload.image.url} alt="" width="378" height="200" />
+      <div className="flex flex-row items-center gap-4">
+        <span>{imageDownload.name}</span>
+        {imageDownload.svgDownloadLink ? (
+          <DownloadButton name="SVG" url={imageDownload.svgDownloadLink} />
+        ) : null}
+        {imageDownload.pngDownloadLink ? (
+          <DownloadButton name="PNG" url={imageDownload.pngDownloadLink} />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+export default ImageDownload;

frontend/src/components/ImageDownload.tsx

@@ -0,0 +1,33 @@
+import { gql } from "graphql-request";
+
+export const klerosLogoSectionQuery = gql`
+  {
+    brandAssetsPageKlerosLogoSection {
+      header
+      imageDownloads {
+        name
+        image {
+          url
+        }
+        svgDownloadLink
+        pngDownloadLink
+      }
+    }
+  }
+`;
+
+export type KlerosLogoSectionQueryType = {
+  brandAssetsPageKlerosLogoSection: {
+    header: string;
+    imageDownloads: ImageDownloadType[];
+  };
+};
+
+export type ImageDownloadType = {
+  name: string;
+  image: {
+    url: string;
+  };
+  svgDownloadLink: string;
+  pngDownloadLink: string;
+};

frontend/src/queries/brand-assets/kleros-logo-section.tsx

@@ -0,0 +1,42 @@
+import { gql } from "graphql-request";
+
+export const logosPackageSectionQuery = gql`
+  {
+    brandAssetsPageLogosPackageSection {
+      header
+      subtitle
+      button {
+        text
+        link {
+          url
+        }
+      }
+      arrowLink {
+        text
+        link {
+          url
+        }
+      }
+    }
+  }
+`;
+
+export type LogosPackageSectionQueryType = {
+  brandAssetsPageLogosPackageSection: {
+    header: string;
+    subtitle: string;
+    button: {
+      text: string;
+      link: {
+        url: string;
+      };
+    };
+    arrowLink: {
+      text: string;
+      link: {
+        name: string;
+        url: string;
+      };
+    };
+  };
+};