From e093492c076b93d91666150d713423cbdc8fffc0 Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Tue, 1 Apr 2025 18:07:44 +0200 Subject: [PATCH] refactor(frontend): re-structure brand-assets, community, cooperative and earn --- .../brand-assets/components/Badges/index.tsx | 33 +++++ .../components/Badges/queries.tsx} | 17 +-- .../components/Colors}/ColorCard.tsx | 7 +- .../brand-assets/components/Colors/index.tsx | 41 ++++++ .../components/Colors/queries.tsx} | 4 +- .../brand-assets/components/Fonts/index.tsx | 33 +++++ .../components/Fonts/queries.tsx} | 4 +- .../brand-assets/components/Hero/index.tsx} | 12 +- .../brand-assets/components/Hero/queries.tsx} | 2 +- .../brand-assets/components/Logos/index.tsx | 35 ++++++ .../components/Logos/queries.tsx} | 17 +-- .../components/LogosPackage/index.tsx} | 16 ++- .../components/LogosPackage/queries.tsx} | 4 +- .../components/PnkToken/index.tsx} | 17 ++- .../components/PnkToken/queries.tsx} | 17 +-- .../components/StyledImages/index.tsx} | 26 ++-- .../components/StyledImages/queries.tsx} | 18 +-- frontend/src/app/brand-assets/page.tsx | 118 ++++++------------ .../components/Communities/CommunityCard.tsx | 42 +++++++ .../components/Communities/index.tsx} | 9 +- .../components/Communities/queries.ts | 29 +++++ .../community/components/Hero/index.tsx} | 21 ++-- .../app/community/components/Hero/queries.ts | 35 ++++++ frontend/src/app/community/page.tsx | 13 +- .../hero.ts => app/community/queries.ts} | 2 +- .../cooperative/components/Hero/index.tsx} | 22 ++-- .../cooperative/components/Hero/queries.ts} | 6 +- .../components/MemberSection/index.tsx | 31 +++++ .../components/MemberSection/queries.ts} | 26 ++-- .../components/Reports}/DropdownContainer.tsx | 4 +- .../components/Reports}/ReportCard.tsx | 4 +- .../cooperative/components/Reports}/index.tsx | 20 +-- .../components/Reports/queries.ts} | 9 +- frontend/src/app/cooperative/page.tsx | 33 ++--- .../earn/components/Hero/index.tsx} | 14 ++- .../earn/components/Hero/queries.ts} | 2 +- .../CuratorTabContent/KlerosScoutSection.tsx | 3 +- .../TabSection/CuratorTabContent/index.tsx | 3 +- .../JurorTabContent/CourtsSection.tsx | 14 ++- .../JurorTabContent/EnterCourtSection.tsx | 3 +- .../TabSection/JurorTabContent/index.tsx | 3 +- .../app/earn/components/TabSection/index.tsx | 30 +++++ .../earn/components/TabSection/queries.ts} | 20 +-- frontend/src/app/earn/page.tsx | 15 +-- .../BrandAssets/KlerosBadgesSection.tsx | 34 ----- .../BrandAssets/KlerosColorsSection/index.tsx | 33 ----- .../BrandAssets/KlerosFontsSection.tsx | 28 ----- .../BrandAssets/KlerosLogoSection.tsx | 28 ----- .../components/Community/CommunityCard.tsx | 27 ---- .../Cooperative/MemberSection/index.tsx | 34 ----- .../src/components/Earn/TabSection/index.tsx | 35 ------ frontend/src/components/ImageDownload.tsx | 31 +++-- frontend/src/queries/utils.ts | 58 +++++++++ 53 files changed, 627 insertions(+), 515 deletions(-) create mode 100644 frontend/src/app/brand-assets/components/Badges/index.tsx rename frontend/src/{queries/brand-assets/kleros-badges-section.tsx => app/brand-assets/components/Badges/queries.tsx} (56%) rename frontend/src/{components/BrandAssets/KlerosColorsSection => app/brand-assets/components/Colors}/ColorCard.tsx (69%) create mode 100644 frontend/src/app/brand-assets/components/Colors/index.tsx rename frontend/src/{queries/brand-assets/kleros-colors-section.tsx => app/brand-assets/components/Colors/queries.tsx} (79%) create mode 100644 frontend/src/app/brand-assets/components/Fonts/index.tsx rename frontend/src/{queries/brand-assets/kleros-fonts-section.tsx => app/brand-assets/components/Fonts/queries.tsx} (84%) rename frontend/src/{components/BrandAssets/Hero.tsx => app/brand-assets/components/Hero/index.tsx} (77%) rename frontend/src/{queries/brand-assets/hero.tsx => app/brand-assets/components/Hero/queries.tsx} (93%) create mode 100644 frontend/src/app/brand-assets/components/Logos/index.tsx rename frontend/src/{queries/brand-assets/kleros-logo-section.tsx => app/brand-assets/components/Logos/queries.tsx} (53%) rename frontend/src/{components/BrandAssets/LogosPackageSection.tsx => app/brand-assets/components/LogosPackage/index.tsx} (68%) rename frontend/src/{queries/brand-assets/logos-package-section.tsx => app/brand-assets/components/LogosPackage/queries.tsx} (86%) rename frontend/src/{components/BrandAssets/PnkTokenSection.tsx => app/brand-assets/components/PnkToken/index.tsx} (55%) rename frontend/src/{queries/brand-assets/pnk-token-section.tsx => app/brand-assets/components/PnkToken/queries.tsx} (56%) rename frontend/src/{components/BrandAssets/StyledImagesSection.tsx => app/brand-assets/components/StyledImages/index.tsx} (65%) rename frontend/src/{queries/brand-assets/styled-images-section.tsx => app/brand-assets/components/StyledImages/queries.tsx} (68%) create mode 100644 frontend/src/app/community/components/Communities/CommunityCard.tsx rename frontend/src/{components/Community/CommunitiesSection.tsx => app/community/components/Communities/index.tsx} (78%) create mode 100644 frontend/src/app/community/components/Communities/queries.ts rename frontend/src/{components/Community/hero.tsx => app/community/components/Hero/index.tsx} (65%) create mode 100644 frontend/src/app/community/components/Hero/queries.ts rename frontend/src/{queries/community/hero.ts => app/community/queries.ts} (96%) rename frontend/src/{components/Cooperative/hero.tsx => app/cooperative/components/Hero/index.tsx} (70%) rename frontend/src/{queries/cooperative/hero.ts => app/cooperative/components/Hero/queries.ts} (84%) create mode 100644 frontend/src/app/cooperative/components/MemberSection/index.tsx rename frontend/src/{queries/cooperative/member-section.ts => app/cooperative/components/MemberSection/queries.ts} (67%) rename frontend/src/{components/Cooperative/ReportSection => app/cooperative/components/Reports}/DropdownContainer.tsx (95%) rename frontend/src/{components/Cooperative/ReportSection => app/cooperative/components/Reports}/ReportCard.tsx (96%) rename frontend/src/{components/Cooperative/ReportSection => app/cooperative/components/Reports}/index.tsx (65%) rename frontend/src/{queries/cooperative/report-section.ts => app/cooperative/components/Reports/queries.ts} (88%) rename frontend/src/{components/Earn/Hero.tsx => app/earn/components/Hero/index.tsx} (83%) rename frontend/src/{queries/earn/hero.ts => app/earn/components/Hero/queries.ts} (94%) rename frontend/src/{components/Earn => app/earn/components}/TabSection/CuratorTabContent/KlerosScoutSection.tsx (95%) rename frontend/src/{components/Earn => app/earn/components}/TabSection/CuratorTabContent/index.tsx (94%) rename frontend/src/{components/Earn => app/earn/components}/TabSection/JurorTabContent/CourtsSection.tsx (81%) rename frontend/src/{components/Earn => app/earn/components}/TabSection/JurorTabContent/EnterCourtSection.tsx (92%) rename frontend/src/{components/Earn => app/earn/components}/TabSection/JurorTabContent/index.tsx (93%) create mode 100644 frontend/src/app/earn/components/TabSection/index.tsx rename frontend/src/{queries/earn/tabs-data.ts => app/earn/components/TabSection/queries.ts} (89%) delete mode 100644 frontend/src/components/BrandAssets/KlerosBadgesSection.tsx delete mode 100644 frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx delete mode 100644 frontend/src/components/BrandAssets/KlerosFontsSection.tsx delete mode 100644 frontend/src/components/BrandAssets/KlerosLogoSection.tsx delete mode 100644 frontend/src/components/Community/CommunityCard.tsx delete mode 100644 frontend/src/components/Cooperative/MemberSection/index.tsx delete mode 100644 frontend/src/components/Earn/TabSection/index.tsx create mode 100644 frontend/src/queries/utils.ts diff --git a/frontend/src/app/brand-assets/components/Badges/index.tsx b/frontend/src/app/brand-assets/components/Badges/index.tsx new file mode 100644 index 0000000..13b089b --- /dev/null +++ b/frontend/src/app/brand-assets/components/Badges/index.tsx @@ -0,0 +1,33 @@ +import ImageDownload from "@/components/ImageDownload"; + +import { IBadgesQuery } from "./queries"; + +interface IBadges { + badgesData: IBadgesQuery["brandAssetsPageKlerosBadgesSection"]; +} + +const Badges: React.FC = ({ badgesData }) => { + return ( +
+

+ {badgesData.header} +

+

+ {badgesData.subtitle} +

+
+ {badgesData.imageDownloads.map((imageDownload) => { + return ( + + ); + })} +
+
+ ); +}; + +export default Badges; diff --git a/frontend/src/queries/brand-assets/kleros-badges-section.tsx b/frontend/src/app/brand-assets/components/Badges/queries.tsx similarity index 56% rename from frontend/src/queries/brand-assets/kleros-badges-section.tsx rename to frontend/src/app/brand-assets/components/Badges/queries.tsx index c7531c6..c045e21 100644 --- a/frontend/src/queries/brand-assets/kleros-badges-section.tsx +++ b/frontend/src/app/brand-assets/components/Badges/queries.tsx @@ -1,6 +1,8 @@ import { gql } from "graphql-request"; -export const klerosBadgesSectionQuery = gql` +import { IImageDownload } from "@/components/ImageDownload"; + +export const badgesQuery = gql` { brandAssetsPageKlerosBadgesSection { header @@ -17,19 +19,10 @@ export const klerosBadgesSectionQuery = gql` } `; -export type KlerosBadgesSectionQueryType = { +export type IBadgesQuery = { brandAssetsPageKlerosBadgesSection: { header: string; subtitle: string; - imageDownloads: ImageDownloadType[]; - }; -}; - -export type ImageDownloadType = { - name: string; - image: { - url: string; + imageDownloads: IImageDownload[]; }; - svgDownloadLink: string; - pngDownloadLink: string; }; diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx b/frontend/src/app/brand-assets/components/Colors/ColorCard.tsx similarity index 69% rename from frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx rename to frontend/src/app/brand-assets/components/Colors/ColorCard.tsx index 6b9281d..84b1222 100644 --- a/frontend/src/components/BrandAssets/KlerosColorsSection/ColorCard.tsx +++ b/frontend/src/app/brand-assets/components/Colors/ColorCard.tsx @@ -1,5 +1,7 @@ import React from "react"; +import clsx from "clsx"; + interface IColorCard { name: string; hexColor: string; @@ -8,7 +10,10 @@ interface IColorCard { const ColorCard: React.FC = ({ name, hexColor }) => { return (
{name} diff --git a/frontend/src/app/brand-assets/components/Colors/index.tsx b/frontend/src/app/brand-assets/components/Colors/index.tsx new file mode 100644 index 0000000..5c8a7cf --- /dev/null +++ b/frontend/src/app/brand-assets/components/Colors/index.tsx @@ -0,0 +1,41 @@ +import clsx from "clsx"; + +import ColorCard from "./ColorCard"; +import { IColorsQuery } from "./queries"; + +interface IColors { + colorsData: IColorsQuery["brandAssetsPageKlerosColorsSection"]; +} + +const KlerosColorsSection: React.FC = ({ colorsData }) => { + return ( +
+

+ {colorsData.header} +

+

+ {colorsData.subtitle} +

+
+ {colorsData?.colorCards?.map((colorCard) => ( + + ))} +
+
+ ); +}; + +export default KlerosColorsSection; diff --git a/frontend/src/queries/brand-assets/kleros-colors-section.tsx b/frontend/src/app/brand-assets/components/Colors/queries.tsx similarity index 79% rename from frontend/src/queries/brand-assets/kleros-colors-section.tsx rename to frontend/src/app/brand-assets/components/Colors/queries.tsx index e424a1e..ca70438 100644 --- a/frontend/src/queries/brand-assets/kleros-colors-section.tsx +++ b/frontend/src/app/brand-assets/components/Colors/queries.tsx @@ -1,6 +1,6 @@ import { gql } from "graphql-request"; -export const klerosColorsSectionQuery = gql` +export const colorsQuery = gql` { brandAssetsPageKlerosColorsSection { header @@ -13,7 +13,7 @@ export const klerosColorsSectionQuery = gql` } `; -export type KlerosColorsSectionQueryType = { +export type IColorsQuery = { brandAssetsPageKlerosColorsSection: { header: string; subtitle: string; diff --git a/frontend/src/app/brand-assets/components/Fonts/index.tsx b/frontend/src/app/brand-assets/components/Fonts/index.tsx new file mode 100644 index 0000000..5ddafe3 --- /dev/null +++ b/frontend/src/app/brand-assets/components/Fonts/index.tsx @@ -0,0 +1,33 @@ +import clsx from "clsx"; + +import CtaCard from "@/components/CtaCard"; + +import { IFontsQuery } from "./queries"; + +interface IFonts { + fontsData: IFontsQuery["brandAssetsPageKlerosFontsSection"]; +} + +const Fonts: React.FC = ({ fontsData }) => { + return ( +
+

+ {fontsData.header} +

+ +
+ ); +}; + +export default Fonts; diff --git a/frontend/src/queries/brand-assets/kleros-fonts-section.tsx b/frontend/src/app/brand-assets/components/Fonts/queries.tsx similarity index 84% rename from frontend/src/queries/brand-assets/kleros-fonts-section.tsx rename to frontend/src/app/brand-assets/components/Fonts/queries.tsx index 6d46529..2877390 100644 --- a/frontend/src/queries/brand-assets/kleros-fonts-section.tsx +++ b/frontend/src/app/brand-assets/components/Fonts/queries.tsx @@ -1,6 +1,6 @@ import { gql } from "graphql-request"; -export const klerosFontsSectionQuery = gql` +export const fontsQuery = gql` { brandAssetsPageKlerosFontsSection { header @@ -18,7 +18,7 @@ export const klerosFontsSectionQuery = gql` } `; -export type KlerosFontsSectionQueryType = { +export type IFontsQuery = { brandAssetsPageKlerosFontsSection: { header: string; linkCard: { diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/app/brand-assets/components/Hero/index.tsx similarity index 77% rename from frontend/src/components/BrandAssets/Hero.tsx rename to frontend/src/app/brand-assets/components/Hero/index.tsx index 87f3620..a056c18 100644 --- a/frontend/src/components/BrandAssets/Hero.tsx +++ b/frontend/src/app/brand-assets/components/Hero/index.tsx @@ -3,19 +3,23 @@ import React from "react"; import Image from "next/image"; import Button from "@/components/Button"; -import { HeroQueryType } from "@/queries/brand-assets/hero"; +import CustomLink from "@/components/CustomLink"; -import CustomLink from "../CustomLink"; +import { IHeroQuery } from "./queries"; interface IHero { - heroData: HeroQueryType["brandAssetsPageHero"]; + heroData: IHeroQuery["brandAssetsPageHero"]; } const Hero: React.FC = ({ heroData }) => { return (
-

+

{heroData.header}

diff --git a/frontend/src/queries/brand-assets/hero.tsx b/frontend/src/app/brand-assets/components/Hero/queries.tsx similarity index 93% rename from frontend/src/queries/brand-assets/hero.tsx rename to frontend/src/app/brand-assets/components/Hero/queries.tsx index 0aa7ea5..f0a8810 100644 --- a/frontend/src/queries/brand-assets/hero.tsx +++ b/frontend/src/app/brand-assets/components/Hero/queries.tsx @@ -18,7 +18,7 @@ export const heroQuery = gql` } `; -export type HeroQueryType = { +export type IHeroQuery = { brandAssetsPageHero: { header: string; subtitle: string; diff --git a/frontend/src/app/brand-assets/components/Logos/index.tsx b/frontend/src/app/brand-assets/components/Logos/index.tsx new file mode 100644 index 0000000..9841157 --- /dev/null +++ b/frontend/src/app/brand-assets/components/Logos/index.tsx @@ -0,0 +1,35 @@ +import clsx from "clsx"; + +import ImageDownload from "@/components/ImageDownload"; + +import { ILogosQuery } from "./queries"; + +interface ILogos { + logosData: ILogosQuery["brandAssetsPageKlerosLogoSection"]; +} + +const Logos: React.FC = ({ logosData }) => { + return ( +

+

+ {logosData.header} +

+
+ {logosData.imageDownloads.map((imageDownload) => { + return ; + })} +
+
+ ); +}; + +export default Logos; diff --git a/frontend/src/queries/brand-assets/kleros-logo-section.tsx b/frontend/src/app/brand-assets/components/Logos/queries.tsx similarity index 53% rename from frontend/src/queries/brand-assets/kleros-logo-section.tsx rename to frontend/src/app/brand-assets/components/Logos/queries.tsx index 196d72d..ee2a5f4 100644 --- a/frontend/src/queries/brand-assets/kleros-logo-section.tsx +++ b/frontend/src/app/brand-assets/components/Logos/queries.tsx @@ -1,6 +1,8 @@ import { gql } from "graphql-request"; -export const klerosLogoSectionQuery = gql` +import { IImageDownload } from "@/components/ImageDownload"; + +export const logosQuery = gql` { brandAssetsPageKlerosLogoSection { header @@ -16,18 +18,9 @@ export const klerosLogoSectionQuery = gql` } `; -export type KlerosLogoSectionQueryType = { +export type ILogosQuery = { brandAssetsPageKlerosLogoSection: { header: string; - imageDownloads: ImageDownloadType[]; - }; -}; - -export type ImageDownloadType = { - name: string; - image: { - url: string; + imageDownloads: IImageDownload[]; }; - svgDownloadLink?: string; - pngDownloadLink?: string; }; diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/app/brand-assets/components/LogosPackage/index.tsx similarity index 68% rename from frontend/src/components/BrandAssets/LogosPackageSection.tsx rename to frontend/src/app/brand-assets/components/LogosPackage/index.tsx index 6fa4715..049a8a7 100644 --- a/frontend/src/components/BrandAssets/LogosPackageSection.tsx +++ b/frontend/src/app/brand-assets/components/LogosPackage/index.tsx @@ -1,18 +1,22 @@ -import { LogosPackageSectionQueryType } from "@/queries/brand-assets/logos-package-section"; +import Button from "@/components/Button"; +import CustomLink from "@/components/CustomLink"; +import ExternalLink from "@/components/ExternalLink"; -import Button from "../Button"; -import CustomLink from "../CustomLink"; -import ExternalLink from "../ExternalLink"; +import { ILogosPackageQuery } from "./queries"; interface ILogosPackageSection { - logosPackageData: LogosPackageSectionQueryType["brandAssetsPageLogosPackageSection"]; + logosPackageData: ILogosPackageQuery["brandAssetsPageLogosPackageSection"]; } const LogosPackageSection: React.FC = ({ logosPackageData, }) => { return ( -
+

{logosPackageData.header}

diff --git a/frontend/src/queries/brand-assets/logos-package-section.tsx b/frontend/src/app/brand-assets/components/LogosPackage/queries.tsx similarity index 86% rename from frontend/src/queries/brand-assets/logos-package-section.tsx rename to frontend/src/app/brand-assets/components/LogosPackage/queries.tsx index 62e1356..a310859 100644 --- a/frontend/src/queries/brand-assets/logos-package-section.tsx +++ b/frontend/src/app/brand-assets/components/LogosPackage/queries.tsx @@ -1,6 +1,6 @@ import { gql } from "graphql-request"; -export const logosPackageSectionQuery = gql` +export const logosPackageQuery = gql` { brandAssetsPageLogosPackageSection { header @@ -21,7 +21,7 @@ export const logosPackageSectionQuery = gql` } `; -export type LogosPackageSectionQueryType = { +export type ILogosPackageQuery = { brandAssetsPageLogosPackageSection: { header: string; subtitle: string; diff --git a/frontend/src/components/BrandAssets/PnkTokenSection.tsx b/frontend/src/app/brand-assets/components/PnkToken/index.tsx similarity index 55% rename from frontend/src/components/BrandAssets/PnkTokenSection.tsx rename to frontend/src/app/brand-assets/components/PnkToken/index.tsx index 31b3dac..31f6fc8 100644 --- a/frontend/src/components/BrandAssets/PnkTokenSection.tsx +++ b/frontend/src/app/brand-assets/components/PnkToken/index.tsx @@ -1,14 +1,21 @@ -import { PnkTokenSectionQueryType } from "@/queries/brand-assets/pnk-token-section"; +import clsx from "clsx"; -import ImageDownload from "../ImageDownload"; +import ImageDownload from "@/components/ImageDownload"; + +import { IPnkTokenQuery } from "./queries"; interface IPnkTokenSection { - pnkTokenData: PnkTokenSectionQueryType["brandAssetsPagePnkTokenSection"]; + pnkTokenData: IPnkTokenQuery["brandAssetsPagePnkTokenSection"]; } const PnkTokenSection: React.FC = ({ pnkTokenData }) => { return ( -
+

{pnkTokenData.header}

@@ -17,7 +24,7 @@ const PnkTokenSection: React.FC = ({ pnkTokenData }) => {

); diff --git a/frontend/src/queries/brand-assets/pnk-token-section.tsx b/frontend/src/app/brand-assets/components/PnkToken/queries.tsx similarity index 56% rename from frontend/src/queries/brand-assets/pnk-token-section.tsx rename to frontend/src/app/brand-assets/components/PnkToken/queries.tsx index b3dae2e..8de2705 100644 --- a/frontend/src/queries/brand-assets/pnk-token-section.tsx +++ b/frontend/src/app/brand-assets/components/PnkToken/queries.tsx @@ -1,6 +1,8 @@ import { gql } from "graphql-request"; -export const pnkTokenSectionQuery = gql` +import { IImageDownload } from "@/components/ImageDownload"; + +export const pnkTokenQuery = gql` { brandAssetsPagePnkTokenSection { header @@ -17,19 +19,10 @@ export const pnkTokenSectionQuery = gql` } `; -export type PnkTokenSectionQueryType = { +export type IPnkTokenQuery = { brandAssetsPagePnkTokenSection: { header: string; subtitle: string; - imageDownload: ImageDownloadType; - }; -}; - -export type ImageDownloadType = { - name: string; - image: { - url: string; + imageDownload: IImageDownload; }; - svgDownloadLink?: string; - pngDownloadLink?: string; }; diff --git a/frontend/src/components/BrandAssets/StyledImagesSection.tsx b/frontend/src/app/brand-assets/components/StyledImages/index.tsx similarity index 65% rename from frontend/src/components/BrandAssets/StyledImagesSection.tsx rename to frontend/src/app/brand-assets/components/StyledImages/index.tsx index 96e2730..1d1e062 100644 --- a/frontend/src/components/BrandAssets/StyledImagesSection.tsx +++ b/frontend/src/app/brand-assets/components/StyledImages/index.tsx @@ -1,16 +1,20 @@ -import { StyledImagesSectionQueryType } from "@/queries/brand-assets/styled-images-section"; +import ImageDownload from "@/components/ImageDownload"; -import ImageDownload from "../ImageDownload"; +import { IStyledImagesQuery } from "./queries"; interface IStyledImagesSection { - styledImagesData: StyledImagesSectionQueryType["brandAssetsPageStyledImagesSection"]; + styledImagesData: IStyledImagesQuery["brandAssetsPageStyledImagesSection"]; } const StyledImagesSection: React.FC = ({ styledImagesData, }) => { return ( -
+

{styledImagesData.header}

@@ -22,13 +26,15 @@ const StyledImagesSection: React.FC = ({

{styledImagesData.wallpapersImageDownloads.map((imageDownload) => { - return ( - - ); + return ; })}
-

+

{styledImagesData.productMockupsHeader}

@@ -38,9 +44,7 @@ const StyledImagesSection: React.FC = ({

{styledImagesData.productMockupsImageDownloads.map((imageDownload) => { - return ( - - ); + return ; })}
diff --git a/frontend/src/queries/brand-assets/styled-images-section.tsx b/frontend/src/app/brand-assets/components/StyledImages/queries.tsx similarity index 68% rename from frontend/src/queries/brand-assets/styled-images-section.tsx rename to frontend/src/app/brand-assets/components/StyledImages/queries.tsx index 5e36a34..9fc8182 100644 --- a/frontend/src/queries/brand-assets/styled-images-section.tsx +++ b/frontend/src/app/brand-assets/components/StyledImages/queries.tsx @@ -1,6 +1,8 @@ import { gql } from "graphql-request"; -export const styledImagesSectionQuery = gql` +import { IImageDownload } from "@/components/ImageDownload"; + +export const styledImagesQuery = gql` { brandAssetsPageStyledImagesSection { header @@ -26,22 +28,14 @@ export const styledImagesSectionQuery = gql` } `; -export type StyledImagesSectionQueryType = { +export type IStyledImagesQuery = { brandAssetsPageStyledImagesSection: { header: string; wallpapersHeader: string; wallpapersSubtitle: string; - wallpapersImageDownloads: ImageDownloadType[]; + wallpapersImageDownloads: IImageDownload[]; productMockupsHeader: string; productMockupsSubtitle: string; - productMockupsImageDownloads: ImageDownloadType[]; - }; -}; - -export type ImageDownloadType = { - name: string; - image: { - url: string; + productMockupsImageDownloads: IImageDownload[]; }; - pngDownloadLink: string; }; diff --git a/frontend/src/app/brand-assets/page.tsx b/frontend/src/app/brand-assets/page.tsx index fc7258e..07aa3fd 100644 --- a/frontend/src/app/brand-assets/page.tsx +++ b/frontend/src/app/brand-assets/page.tsx @@ -1,102 +1,62 @@ import type { Metadata } from "next"; -import Hero from "@/components/BrandAssets/Hero"; -import KlerosBadgesSection from "@/components/BrandAssets/KlerosBadgesSection"; -import KlerosColorsSection from "@/components/BrandAssets/KlerosColorsSection/index"; -import KlerosFontsSection from "@/components/BrandAssets/KlerosFontsSection"; -import KlerosLogoSection from "@/components/BrandAssets/KlerosLogoSection"; -import LogosPackageSection from "@/components/BrandAssets/LogosPackageSection"; -import PnkTokenSection from "@/components/BrandAssets/PnkTokenSection"; -import StyledImagesSection from "@/components/BrandAssets/StyledImagesSection"; -import { heroQuery, HeroQueryType } from "@/queries/brand-assets/hero"; -import { - klerosBadgesSectionQuery, - KlerosBadgesSectionQueryType, -} from "@/queries/brand-assets/kleros-badges-section"; -import { - klerosColorsSectionQuery, - KlerosColorsSectionQueryType, -} from "@/queries/brand-assets/kleros-colors-section"; -import { - klerosFontsSectionQuery, - KlerosFontsSectionQueryType, -} from "@/queries/brand-assets/kleros-fonts-section"; -import { - klerosLogoSectionQuery, - KlerosLogoSectionQueryType, -} from "@/queries/brand-assets/kleros-logo-section"; -import { - logosPackageSectionQuery, - LogosPackageSectionQueryType, -} from "@/queries/brand-assets/logos-package-section"; -import { - pnkTokenSectionQuery, - PnkTokenSectionQueryType, -} from "@/queries/brand-assets/pnk-token-section"; -import { - styledImagesSectionQuery, - StyledImagesSectionQueryType, -} from "@/queries/brand-assets/styled-images-section"; import { request } from "@/utils/graphQLClient"; import { getPageMetadata } from "@/utils/seo"; +import Badges from "./components/Badges"; +import { badgesQuery, IBadgesQuery } from "./components/Badges/queries"; +import Colors from "./components/Colors"; +import { colorsQuery, IColorsQuery } from "./components/Colors/queries"; +import Fonts from "./components/Fonts"; +import { fontsQuery, IFontsQuery } from "./components/Fonts/queries"; +import Hero from "./components/Hero"; +import { heroQuery, IHeroQuery } from "./components/Hero/queries"; +import Logos from "./components/Logos"; +import { logosQuery, ILogosQuery } from "./components/Logos/queries"; +import LogosPackage from "./components/LogosPackage"; +import { + logosPackageQuery, + ILogosPackageQuery, +} from "./components/LogosPackage/queries"; +import PnkToken from "./components/PnkToken"; +import { pnkTokenQuery, IPnkTokenQuery } from "./components/PnkToken/queries"; +import StyledImages from "./components/StyledImages"; +import { + styledImagesQuery, + IStyledImagesQuery, +} from "./components/StyledImages/queries"; + export const generateMetadata = async (): Promise => { return await getPageMetadata("brandAssetsPageSeo"); }; const BrandAssets: React.FC = async () => { - const heroData = await request(heroQuery); - const logosPackageData = await request( - logosPackageSectionQuery, - ); - const klerosLogoSection = await request( - klerosLogoSectionQuery, - ); - const klerosFontsSection = await request( - klerosFontsSectionQuery, - ); - const klerosColorsSection = await request( - klerosColorsSectionQuery, - ); - const klerosBadgesSection = await request( - klerosBadgesSectionQuery, - ); - const styledImagesSection = await request( - styledImagesSectionQuery, - ); - const pnkTokenSection = - await request(pnkTokenSectionQuery); + const heroData = await request(heroQuery); + const logosPackageData = await request(logosPackageQuery); + const logosSection = await request(logosQuery); + const fontsSection = await request(fontsQuery); + const colorsSection = await request(colorsQuery); + const badgesSection = await request(badgesQuery); + const styledImagesSection = + await request(styledImagesQuery); + const pnkTokenSection = await request(pnkTokenQuery); return ( <> - - - - - - + + + + - + ); }; diff --git a/frontend/src/app/community/components/Communities/CommunityCard.tsx b/frontend/src/app/community/components/Communities/CommunityCard.tsx new file mode 100644 index 0000000..58dc21b --- /dev/null +++ b/frontend/src/app/community/components/Communities/CommunityCard.tsx @@ -0,0 +1,42 @@ +import clsx from "clsx"; +import Image from "next/image"; + +import CustomLink from "@/components/CustomLink"; + +import { ICommunity } from "./queries"; + +const CommunityCard: React.FC = ({ + title, + subtitle, + icon, + url, +}) => { + return ( + +
+ {icon.name} +

+ {title} +

+ +
+ + ); +}; + +export default CommunityCard; diff --git a/frontend/src/components/Community/CommunitiesSection.tsx b/frontend/src/app/community/components/Communities/index.tsx similarity index 78% rename from frontend/src/components/Community/CommunitiesSection.tsx rename to frontend/src/app/community/components/Communities/index.tsx index d39714e..bcb42aa 100644 --- a/frontend/src/components/Community/CommunitiesSection.tsx +++ b/frontend/src/app/community/components/Communities/index.tsx @@ -1,14 +1,13 @@ import clsx from "clsx"; -import { Community } from "@/queries/community/hero"; +import { request } from "@/utils/graphQLClient"; import CommunityCard from "./CommunityCard"; +import { communitiesQuery, ICommunitiesQuery } from "./queries"; -interface ICommunitiesSection { - communities: Community[]; -} +const CommunitiesSection: React.FC = async () => { + const { communities } = await request(communitiesQuery); -const CommunitiesSection: React.FC = ({ communities }) => { const rowOneCommunities = communities.slice(0, 2); const restCommunities = communities.slice(2); return ( diff --git a/frontend/src/app/community/components/Communities/queries.ts b/frontend/src/app/community/components/Communities/queries.ts new file mode 100644 index 0000000..4a117c0 --- /dev/null +++ b/frontend/src/app/community/components/Communities/queries.ts @@ -0,0 +1,29 @@ +import { gql } from "graphql-request"; + +export type ICommunity = { + title: string; + subtitle: string; + url: string; + icon: { + url: string; + name: string; + }; +}; + +export const communitiesQuery = gql` + { + communities { + title + subtitle + url + icon { + url + name + } + } + } +`; + +export type ICommunitiesQuery = { + communities: ICommunity[]; +}; diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/app/community/components/Hero/index.tsx similarity index 65% rename from frontend/src/components/Community/hero.tsx rename to frontend/src/app/community/components/Hero/index.tsx index bd7c990..72e5d45 100644 --- a/frontend/src/components/Community/hero.tsx +++ b/frontend/src/app/community/components/Hero/index.tsx @@ -3,20 +3,25 @@ import React from "react"; import Image from "next/image"; import Button from "@/components/Button"; -import { HeroQueryType } from "@/queries/community/hero"; +import CustomLink from "@/components/CustomLink"; +import { request } from "@/utils/graphQLClient"; -import CustomLink from "../CustomLink"; +import { heroQuery, IHeroQuery } from "./queries"; -interface IHero { - heroData: HeroQueryType["communityPageHero"]; -} +const Hero: React.FC = async () => { + const { header, subtitle, communityButtons, background } = + await request(heroQuery).then( + (heroData) => heroData.communityPageHero, + ); -const Hero: React.FC = ({ heroData }) => { - const { header, subtitle, communityButtons, background } = heroData; return (
-

+

{header}

{subtitle}

diff --git a/frontend/src/app/community/components/Hero/queries.ts b/frontend/src/app/community/components/Hero/queries.ts new file mode 100644 index 0000000..19b094c --- /dev/null +++ b/frontend/src/app/community/components/Hero/queries.ts @@ -0,0 +1,35 @@ +import { gql } from "graphql-request"; + +export const heroQuery = gql` + { + communityPageHero { + header + subtitle + communityButtons { + text + link { + url + } + } + background { + url + } + } + } +`; + +export type IHeroQuery = { + communityPageHero: { + header: string; + subtitle: string; + communityButtons: { + text: string; + link: { + url: string; + }; + }[]; + background: { + url: string; + }; + }; +}; diff --git a/frontend/src/app/community/page.tsx b/frontend/src/app/community/page.tsx index 5755954..317a035 100644 --- a/frontend/src/app/community/page.tsx +++ b/frontend/src/app/community/page.tsx @@ -1,22 +1,19 @@ import type { Metadata } from "next"; -import CommunitiesSection from "@/components/Community/CommunitiesSection"; -import Hero from "@/components/Community/hero"; -import { heroQuery, HeroQueryType } from "@/queries/community/hero"; -import { request } from "@/utils/graphQLClient"; import { getPageMetadata } from "@/utils/seo"; +import Communities from "./components/Communities"; +import Hero from "./components/Hero"; + export const generateMetadata = async (): Promise => { return await getPageMetadata("communityPageSeo"); }; const Community: React.FC = async () => { - const heroData = await request(heroQuery); - return ( <> - - + + ); }; diff --git a/frontend/src/queries/community/hero.ts b/frontend/src/app/community/queries.ts similarity index 96% rename from frontend/src/queries/community/hero.ts rename to frontend/src/app/community/queries.ts index 4fb4706..49de765 100644 --- a/frontend/src/queries/community/hero.ts +++ b/frontend/src/app/community/queries.ts @@ -37,7 +37,7 @@ export const heroQuery = gql` } `; -export type HeroQueryType = { +export type IHeroQuery = { communityPageHero: { header: string; subtitle: string; diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/app/cooperative/components/Hero/index.tsx similarity index 70% rename from frontend/src/components/Cooperative/hero.tsx rename to frontend/src/app/cooperative/components/Hero/index.tsx index 331830b..0274134 100644 --- a/frontend/src/components/Cooperative/hero.tsx +++ b/frontend/src/app/cooperative/components/Hero/index.tsx @@ -3,21 +3,25 @@ import React from "react"; import Image from "next/image"; import Button from "@/components/Button"; +import CustomLink from "@/components/CustomLink"; import ExternalLink from "@/components/ExternalLink"; -import { HeroQueryType } from "@/queries/cooperative/hero"; +import { request } from "@/utils/graphQLClient"; -import CustomLink from "../CustomLink"; +import { heroQuery, IHeroQuery } from "./queries"; -interface IHero { - heroData: HeroQueryType["cooperativePageHero"]; -} - -const Hero: React.FC = ({ heroData }) => { - const { header, subtitle, buttons, arrowLink, background } = heroData; +const Hero: React.FC = async () => { + const { header, subtitle, buttons, arrowLink, background } = + await request(heroQuery).then( + ({ cooperativePageHero }) => cooperativePageHero, + ); return (
-

+

{header}

{subtitle}

diff --git a/frontend/src/queries/cooperative/hero.ts b/frontend/src/app/cooperative/components/Hero/queries.ts similarity index 84% rename from frontend/src/queries/cooperative/hero.ts rename to frontend/src/app/cooperative/components/Hero/queries.ts index 6051c80..f54dd0f 100644 --- a/frontend/src/queries/cooperative/hero.ts +++ b/frontend/src/app/cooperative/components/Hero/queries.ts @@ -1,6 +1,6 @@ import { gql } from "graphql-request"; -import { ArrowLink } from "../navbar"; +import { IArrowLink } from "@/queries/utils"; export const heroQuery = gql` { @@ -26,7 +26,7 @@ export const heroQuery = gql` } `; -export type HeroQueryType = { +export type IHeroQuery = { cooperativePageHero: { header: string; subtitle: string; @@ -36,7 +36,7 @@ export type HeroQueryType = { url: string; }; }[]; - arrowLink: ArrowLink; + arrowLink: IArrowLink; background: { url: string; }; diff --git a/frontend/src/app/cooperative/components/MemberSection/index.tsx b/frontend/src/app/cooperative/components/MemberSection/index.tsx new file mode 100644 index 0000000..e0d6ce0 --- /dev/null +++ b/frontend/src/app/cooperative/components/MemberSection/index.tsx @@ -0,0 +1,31 @@ +import ExternalLink from "@/components/ExternalLink"; +import LearnMore from "@/components/LearnMore"; +import { request } from "@/utils/graphQLClient"; + +import { memberQuery, IMemberQuery } from "./queries"; + +const MemberSection: React.FC = async () => { + const { header, subtitle, learnMoreSection, secondaryHeader, arrowLink } = + await request(memberQuery).then( + ({ cooperativePageMemberSection }) => cooperativePageMemberSection, + ); + return ( +
+

+ {header} +

+

{subtitle}

+ +

+ {secondaryHeader} +

+ +
+ ); +}; + +export default MemberSection; diff --git a/frontend/src/queries/cooperative/member-section.ts b/frontend/src/app/cooperative/components/MemberSection/queries.ts similarity index 67% rename from frontend/src/queries/cooperative/member-section.ts rename to frontend/src/app/cooperative/components/MemberSection/queries.ts index 279adf5..b964b9f 100644 --- a/frontend/src/queries/cooperative/member-section.ts +++ b/frontend/src/app/cooperative/components/MemberSection/queries.ts @@ -1,16 +1,8 @@ import { gql } from "graphql-request"; -import { ArrowLink } from "../navbar"; +import { IArrowLink } from "@/queries/utils"; -export type CooperativeLearnMoreSection = { - title: string; - button: ArrowLink; - background: { - url: string; - }; -}; - -export const cooperativePageMemberQuery = gql` +export const memberQuery = gql` { cooperativePageMemberSection { header @@ -38,12 +30,20 @@ export const cooperativePageMemberQuery = gql` } `; -export type CooperativePageMemberQueryType = { +export type ILearnMoreSection = { + title: string; + button: IArrowLink; + background: { + url: string; + }; +}; + +export type IMemberQuery = { cooperativePageMemberSection: { header: string; subtitle: string; - learnMoreSection: CooperativeLearnMoreSection; + learnMoreSection: ILearnMoreSection; secondaryHeader: string; - arrowLink: ArrowLink; + arrowLink: IArrowLink; }; }; diff --git a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx b/frontend/src/app/cooperative/components/Reports/DropdownContainer.tsx similarity index 95% rename from frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx rename to frontend/src/app/cooperative/components/Reports/DropdownContainer.tsx index 767259f..e0927a3 100644 --- a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx +++ b/frontend/src/app/cooperative/components/Reports/DropdownContainer.tsx @@ -3,12 +3,12 @@ import { useEffect, useMemo, useState } from "react"; import Dropdown from "@/components/Dropdown"; -import { Report } from "@/queries/cooperative/report-section"; +import { IReport } from "./queries"; import { Reports } from "./ReportCard"; interface IDropdownContainer - extends Pick { + extends Pick { reports: Reports; setSelectedReport: (report?: Reports[number]) => void; } diff --git a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx b/frontend/src/app/cooperative/components/Reports/ReportCard.tsx similarity index 96% rename from frontend/src/components/Cooperative/ReportSection/ReportCard.tsx rename to frontend/src/app/cooperative/components/Reports/ReportCard.tsx index a28a0b5..95c240c 100644 --- a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx +++ b/frontend/src/app/cooperative/components/Reports/ReportCard.tsx @@ -6,9 +6,9 @@ import clsx from "clsx"; import Image from "next/image"; import Button from "@/components/Button"; -import { Report } from "@/queries/cooperative/report-section"; import DropdownContainer from "./DropdownContainer"; +import { IReport } from "./queries"; export type Reports = { file: { url: string }; @@ -16,7 +16,7 @@ export type Reports = { year: number; }[]; -interface IReportCard extends Report { +interface IReportCard extends IReport { reports: Reports; } const ReportCard: React.FC = ({ diff --git a/frontend/src/components/Cooperative/ReportSection/index.tsx b/frontend/src/app/cooperative/components/Reports/index.tsx similarity index 65% rename from frontend/src/components/Cooperative/ReportSection/index.tsx rename to frontend/src/app/cooperative/components/Reports/index.tsx index e98cbac..64abd98 100644 --- a/frontend/src/components/Cooperative/ReportSection/index.tsx +++ b/frontend/src/app/cooperative/components/Reports/index.tsx @@ -2,18 +2,22 @@ import { useCallback } from "react"; import clsx from "clsx"; -import { - CooperativePageReportQueryType, - ReportType, -} from "@/queries/cooperative/report-section"; +import { request } from "@/utils/graphQLClient"; +import { reportQuery, ReportType, IReportQuery } from "./queries"; import ReportCard from "./ReportCard"; -interface IReportSection { - reportsData: CooperativePageReportQueryType; +const Reports: React.FC = async () => { + const reportsData = await request(reportQuery); + + return ; +}; + +interface IComponentContent { + reportsData: IReportQuery; } -const ReportSection: React.FC = ({ reportsData }) => { +const ComponentContent: React.FC = ({ reportsData }) => { const getReports = useCallback( (reportType: ReportType) => { switch (reportType) { @@ -46,4 +50,4 @@ const ReportSection: React.FC = ({ reportsData }) => { ); }; -export default ReportSection; +export default Reports; diff --git a/frontend/src/queries/cooperative/report-section.ts b/frontend/src/app/cooperative/components/Reports/queries.ts similarity index 88% rename from frontend/src/queries/cooperative/report-section.ts rename to frontend/src/app/cooperative/components/Reports/queries.ts index 212a4ae..b8f4a0b 100644 --- a/frontend/src/queries/cooperative/report-section.ts +++ b/frontend/src/app/cooperative/components/Reports/queries.ts @@ -1,7 +1,8 @@ import { gql } from "graphql-request"; export type ReportType = "annual" | "risk" | "treasury"; -export type Report = { + +export type IReport = { title: string; subtitle: string; reportType: ReportType; @@ -14,7 +15,7 @@ export type Report = { }; }; -export const cooperativePageReportQuery = gql` +export const reportQuery = gql` { cooperativePageReportSection { reports { @@ -56,9 +57,9 @@ export const cooperativePageReportQuery = gql` } `; -export type CooperativePageReportQueryType = { +export type IReportQuery = { cooperativePageReportSection: { - reports: Report[]; + reports: IReport[]; }; annualReports: { diff --git a/frontend/src/app/cooperative/page.tsx b/frontend/src/app/cooperative/page.tsx index dc49f6d..b2f6cbc 100644 --- a/frontend/src/app/cooperative/page.tsx +++ b/frontend/src/app/cooperative/page.tsx @@ -1,40 +1,21 @@ import type { Metadata } from "next"; -import Hero from "@/components/Cooperative/hero"; -import MemberSection from "@/components/Cooperative/MemberSection"; -import ReportSection from "@/components/Cooperative/ReportSection"; -import { heroQuery, HeroQueryType } from "@/queries/cooperative/hero"; -import { - cooperativePageMemberQuery, - CooperativePageMemberQueryType, -} from "@/queries/cooperative/member-section"; -import { - cooperativePageReportQuery, - CooperativePageReportQueryType, -} from "@/queries/cooperative/report-section"; -import { request } from "@/utils/graphQLClient"; import { getPageMetadata } from "@/utils/seo"; +import Hero from "./components/Hero"; +import MemberSection from "./components/MemberSection"; +import Reports from "./components/Reports"; + export const generateMetadata = async (): Promise => { return await getPageMetadata("cooperativePageSeo"); }; const Cooperative: React.FC = async () => { - const heroData = await request(heroQuery); - const reportData = await request( - cooperativePageReportQuery, - ); - const memberSectionData = await request( - cooperativePageMemberQuery, - ); - return ( <> - - - + + + ); }; diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/app/earn/components/Hero/index.tsx similarity index 83% rename from frontend/src/components/Earn/Hero.tsx rename to frontend/src/app/earn/components/Hero/index.tsx index d4a26d5..1d0818a 100644 --- a/frontend/src/components/Earn/Hero.tsx +++ b/frontend/src/app/earn/components/Hero/index.tsx @@ -3,14 +3,16 @@ import React from "react"; import clsx from "clsx"; import Image from "next/image"; -import { HeroQueryType } from "@/queries/earn/hero"; +import { request } from "@/utils/graphQLClient"; -interface IHero { - heroData: HeroQueryType; -} +import { heroQuery, IHeroQuery } from "./queries"; + +const Hero: React.FC = async () => { + const { title, subtitle, statDisplay, background } = + await request(heroQuery).then( + ({ earnPageHero }) => earnPageHero, + ); -const Hero: React.FC = ({ heroData }) => { - const { title, subtitle, statDisplay, background } = heroData.earnPageHero; return (
diff --git a/frontend/src/queries/earn/hero.ts b/frontend/src/app/earn/components/Hero/queries.ts similarity index 94% rename from frontend/src/queries/earn/hero.ts rename to frontend/src/app/earn/components/Hero/queries.ts index 1ce02c9..455141a 100644 --- a/frontend/src/queries/earn/hero.ts +++ b/frontend/src/app/earn/components/Hero/queries.ts @@ -20,7 +20,7 @@ export const heroQuery = gql` } `; -export type HeroQueryType = { +export type IHeroQuery = { earnPageHero: { title: string; subtitle: string; diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/app/earn/components/TabSection/CuratorTabContent/KlerosScoutSection.tsx similarity index 95% rename from frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx rename to frontend/src/app/earn/components/TabSection/CuratorTabContent/KlerosScoutSection.tsx index f8c875e..f4e6eb6 100644 --- a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx +++ b/frontend/src/app/earn/components/TabSection/CuratorTabContent/KlerosScoutSection.tsx @@ -4,7 +4,8 @@ import Image from "next/image"; import Button from "@/components/Button"; import CustomLink from "@/components/CustomLink"; import ExternalLink from "@/components/ExternalLink"; -import { KlerosScoutSection as IKlerosScoutSection } from "@/queries/earn/tabs-data"; + +import { KlerosScoutSection as IKlerosScoutSection } from "../queries"; const KlerosScoutSection: React.FC = ({ header, diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx b/frontend/src/app/earn/components/TabSection/CuratorTabContent/index.tsx similarity index 94% rename from frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx rename to frontend/src/app/earn/components/TabSection/CuratorTabContent/index.tsx index fe8beef..a81e44d 100644 --- a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx +++ b/frontend/src/app/earn/components/TabSection/CuratorTabContent/index.tsx @@ -1,6 +1,7 @@ import CtaCard from "@/components/CtaCard"; import ExternalLink from "@/components/ExternalLink"; -import { EarnPageBecomeACuratorTab } from "@/queries/earn/tabs-data"; + +import { EarnPageBecomeACuratorTab } from "../queries"; import KlerosScoutSection from "./KlerosScoutSection"; diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx b/frontend/src/app/earn/components/TabSection/JurorTabContent/CourtsSection.tsx similarity index 81% rename from frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx rename to frontend/src/app/earn/components/TabSection/JurorTabContent/CourtsSection.tsx index 3e9f132..2b162af 100644 --- a/frontend/src/components/Earn/TabSection/JurorTabContent/CourtsSection.tsx +++ b/frontend/src/app/earn/components/TabSection/JurorTabContent/CourtsSection.tsx @@ -4,13 +4,14 @@ import Image from "next/image"; import PlusIcon from "@/assets/svgs/icons/plus-icon.svg"; import CustomLink from "@/components/CustomLink"; import Tag from "@/components/Tag"; -import { Court } from "@/queries/earn/tabs-data"; -import { ArrowLink } from "@/queries/navbar"; +import { IArrowLink } from "@/queries/utils"; + +import { Court } from "../queries"; interface ICourtsSection { mostActiveCourtsHeader: string; mostActiveCourts: Court[]; - courtsButton: ArrowLink; + courtsButton: IArrowLink; } const CourtsSection: React.FC = ({ mostActiveCourtsHeader, @@ -19,7 +20,12 @@ const CourtsSection: React.FC = ({ }) => { return ( <> -

+

{mostActiveCourtsHeader}

diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx b/frontend/src/app/earn/components/TabSection/JurorTabContent/EnterCourtSection.tsx similarity index 92% rename from frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx rename to frontend/src/app/earn/components/TabSection/JurorTabContent/EnterCourtSection.tsx index acc1d70..24f568d 100644 --- a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx +++ b/frontend/src/app/earn/components/TabSection/JurorTabContent/EnterCourtSection.tsx @@ -5,7 +5,8 @@ import Image from "next/image"; import Button from "@/components/Button"; import CustomLink from "@/components/CustomLink"; import ExternalLink from "@/components/ExternalLink"; -import { EnterCourtSection as IEnterCourtSection } from "@/queries/earn/tabs-data"; + +import { EnterCourtSection as IEnterCourtSection } from "../queries"; const EnterCourtSection: React.FC = ({ button, diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx b/frontend/src/app/earn/components/TabSection/JurorTabContent/index.tsx similarity index 93% rename from frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx rename to frontend/src/app/earn/components/TabSection/JurorTabContent/index.tsx index 8e3b455..efa43e3 100644 --- a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx +++ b/frontend/src/app/earn/components/TabSection/JurorTabContent/index.tsx @@ -1,5 +1,6 @@ import CtaCard from "@/components/CtaCard"; -import { EarnPageBecomeAJurorTab } from "@/queries/earn/tabs-data"; + +import { EarnPageBecomeAJurorTab } from "../queries"; import CourtsSection from "./CourtsSection"; import EnterCourtSection from "./EnterCourtSection"; diff --git a/frontend/src/app/earn/components/TabSection/index.tsx b/frontend/src/app/earn/components/TabSection/index.tsx new file mode 100644 index 0000000..b21a54b --- /dev/null +++ b/frontend/src/app/earn/components/TabSection/index.tsx @@ -0,0 +1,30 @@ +import Tab from "@/components/Tab"; +import { request } from "@/utils/graphQLClient"; + +import CuratorTabContent from "./CuratorTabContent"; +import JurorTabContent from "./JurorTabContent"; +import { tabsQuery, ITabsQuery } from "./queries"; + +const TabSection: React.FC = async () => { + const { earnPageBecomeAJurorTabContent, earnPageBecomeACuratorTabContent } = + await request(tabsQuery); + return ( +
+ , + }, + { + text: earnPageBecomeACuratorTabContent.tabName, + children: ( + + ), + }, + ]} + /> +
+ ); +}; +export default TabSection; diff --git a/frontend/src/queries/earn/tabs-data.ts b/frontend/src/app/earn/components/TabSection/queries.ts similarity index 89% rename from frontend/src/queries/earn/tabs-data.ts rename to frontend/src/app/earn/components/TabSection/queries.ts index 402d811..0bcf384 100644 --- a/frontend/src/queries/earn/tabs-data.ts +++ b/frontend/src/app/earn/components/TabSection/queries.ts @@ -1,8 +1,8 @@ import { gql } from "graphql-request"; -import { ArrowLink } from "../navbar"; +import { IArrowLink } from "@/queries/utils"; -export const tabSectionQuery = gql` +export const tabsQuery = gql` { earnPageBecomeAJurorTabContent { tabName @@ -116,13 +116,13 @@ export type Court = { export type CtaCard = { title: string; description: string; - arrowLink: ArrowLink; + arrowLink: IArrowLink; icon: { url: string }; }; export type EnterCourtSection = { - button: ArrowLink; - arrowLink: ArrowLink; + button: IArrowLink; + arrowLink: IArrowLink; background: { url: string }; }; @@ -130,9 +130,9 @@ export type KlerosScoutSection = { header: string; productName: string; productIcon: { url: string }; - learnMoreButton: ArrowLink; + learnMoreButton: IArrowLink; background: { url: string }; - arrowLinks: ArrowLink[]; + arrowLinks: IArrowLink[]; }; export type EarnPageBecomeAJurorTab = { @@ -143,7 +143,7 @@ export type EarnPageBecomeAJurorTab = { enterCourtSection: EnterCourtSection; mostActiveCourtsHeader: string; mostActiveCourts: Court[]; - courtsButton: ArrowLink; + courtsButton: IArrowLink; }; export type EarnPageBecomeACuratorTab = { @@ -151,12 +151,12 @@ export type EarnPageBecomeACuratorTab = { title: string; description: string; ctaCard: CtaCard[]; - arrowLink: ArrowLink; + arrowLink: IArrowLink; scoutExplanation: string; klerosScoutSection: KlerosScoutSection; }; -export type TabSectionQueryType = { +export type ITabsQuery = { earnPageBecomeAJurorTabContent: EarnPageBecomeAJurorTab; earnPageBecomeACuratorTabContent: EarnPageBecomeACuratorTab; }; diff --git a/frontend/src/app/earn/page.tsx b/frontend/src/app/earn/page.tsx index 6e5236d..e5d97c7 100644 --- a/frontend/src/app/earn/page.tsx +++ b/frontend/src/app/earn/page.tsx @@ -1,24 +1,19 @@ import type { Metadata } from "next"; -import Hero from "@/components/Earn/Hero"; -import TabSection from "@/components/Earn/TabSection"; -import { heroQuery, HeroQueryType } from "@/queries/earn/hero"; -import { tabSectionQuery, TabSectionQueryType } from "@/queries/earn/tabs-data"; -import { request } from "@/utils/graphQLClient"; import { getPageMetadata } from "@/utils/seo"; +import Hero from "./components/Hero"; +import TabSection from "./components/TabSection"; + export const generateMetadata = async (): Promise => { return await getPageMetadata("earnPageSeo"); }; const Earn: React.FC = async () => { - const heroData = await request(heroQuery); - const tabsData = await request(tabSectionQuery); - return ( <> - - + + ); }; diff --git a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx deleted file mode 100644 index 2bf7464..0000000 --- a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { KlerosBadgesSectionQueryType } from "@/queries/brand-assets/kleros-badges-section"; - -import ImageDownload from "../ImageDownload"; - -interface IKlerosBadgesSection { - klerosBadgesData: KlerosBadgesSectionQueryType["brandAssetsPageKlerosBadgesSection"]; -} - -const KlerosBadgesSection: React.FC = ({ - klerosBadgesData, -}) => { - return ( -
-

- {klerosBadgesData.header} -

-

- {klerosBadgesData.subtitle} -

-
- {klerosBadgesData.imageDownloads.map((imageDownload) => { - return ( - - ); - })} -
-
- ); -}; - -export default KlerosBadgesSection; diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx deleted file mode 100644 index 3053bdd..0000000 --- a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { KlerosColorsSectionQueryType } from "@/queries/brand-assets/kleros-colors-section"; - -import ColorCard from "./ColorCard"; - -interface IKlerosColorsSection { - klerosColorsData: KlerosColorsSectionQueryType["brandAssetsPageKlerosColorsSection"]; -} - -const KlerosColorsSection: React.FC = ({ - klerosColorsData, -}) => { - return ( -
-

- {klerosColorsData.header} -

-

- {klerosColorsData.subtitle} -

-
- {klerosColorsData?.colorCards?.map((colorCard) => ( - - ))} -
-
- ); -}; - -export default KlerosColorsSection; diff --git a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx deleted file mode 100644 index e1ed7b8..0000000 --- a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { KlerosFontsSectionQueryType } from "@/queries/brand-assets/kleros-fonts-section"; - -import CtaCard from "../CtaCard"; - -interface IKlerosFontsSection { - klerosFontsData: KlerosFontsSectionQueryType["brandAssetsPageKlerosFontsSection"]; -} - -const KlerosFontsSection: React.FC = ({ - klerosFontsData, -}) => { - return ( -
-

- {klerosFontsData.header} -

- -
- ); -}; - -export default KlerosFontsSection; diff --git a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx deleted file mode 100644 index 7d4f292..0000000 --- a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { KlerosLogoSectionQueryType } from "@/queries/brand-assets/kleros-logo-section"; - -import ImageDownload from "../ImageDownload"; - -interface IKlerosLogoSection { - klerosLogoData: KlerosLogoSectionQueryType["brandAssetsPageKlerosLogoSection"]; -} - -const KlerosLogoSection: React.FC = ({ - klerosLogoData, -}) => { - return ( -
-

- {klerosLogoData.header} -

-
- {klerosLogoData.imageDownloads.map((imageDownload) => { - return ( - - ); - })} -
-
- ); -}; - -export default KlerosLogoSection; diff --git a/frontend/src/components/Community/CommunityCard.tsx b/frontend/src/components/Community/CommunityCard.tsx deleted file mode 100644 index f8bc6cb..0000000 --- a/frontend/src/components/Community/CommunityCard.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Image from "next/image"; - -import { Community } from "@/queries/community/hero"; - -import CustomLink from "../CustomLink"; - -const CommunityCard: React.FC = ({ title, subtitle, icon, url }) => { - return ( - -
- {icon.name} -

- {title} -

- -
- - ); -}; - -export default CommunityCard; diff --git a/frontend/src/components/Cooperative/MemberSection/index.tsx b/frontend/src/components/Cooperative/MemberSection/index.tsx deleted file mode 100644 index 67e8095..0000000 --- a/frontend/src/components/Cooperative/MemberSection/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import ExternalLink from "@/components/ExternalLink"; -import LearnMore from "@/components/LearnMore"; -import { CooperativePageMemberQueryType } from "@/queries/cooperative/member-section"; - -interface IMemberSection { - memberData: CooperativePageMemberQueryType["cooperativePageMemberSection"]; -} - -const MemberSection: React.FC = ({ memberData }) => { - return ( -
-

- {memberData.header} -

-

- {memberData.subtitle} -

- -

- {memberData.secondaryHeader} -

- -
- ); -}; - -export default MemberSection; diff --git a/frontend/src/components/Earn/TabSection/index.tsx b/frontend/src/components/Earn/TabSection/index.tsx deleted file mode 100644 index 6a24404..0000000 --- a/frontend/src/components/Earn/TabSection/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import Tab from "@/components/Tab"; -import { TabSectionQueryType } from "@/queries/earn/tabs-data"; - -import CuratorTabContent from "./CuratorTabContent"; -import JurorTabContent from "./JurorTabContent"; - -interface ITabSection { - tabsData: TabSectionQueryType; -} - -const TabSection: React.FC = ({ tabsData }) => { - return ( -
- - ), - }, - { - text: tabsData.earnPageBecomeACuratorTabContent.tabName, - children: ( - - ), - }, - ]} - /> -
- ); -}; -export default TabSection; diff --git a/frontend/src/components/ImageDownload.tsx b/frontend/src/components/ImageDownload.tsx index 1e571e2..b14800c 100644 --- a/frontend/src/components/ImageDownload.tsx +++ b/frontend/src/components/ImageDownload.tsx @@ -2,28 +2,37 @@ 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; +export interface IImageDownload { + name: string; + image: { + url: string; + }; + svgDownloadLink?: string; + pngDownloadLink?: string; } -const ImageDownload: React.FC = ({ imageDownload }) => { +const ImageDownload: React.FC = ({ + name, + image, + svgDownloadLink, + pngDownloadLink, +}) => { return (
- +
- {imageDownload.name} - {imageDownload.svgDownloadLink ? ( - + {name} + {svgDownloadLink ? ( + ) : null} - {imageDownload.pngDownloadLink ? ( - + {pngDownloadLink ? ( + ) : null}
); }; + export default ImageDownload; diff --git a/frontend/src/queries/utils.ts b/frontend/src/queries/utils.ts new file mode 100644 index 0000000..74603ef --- /dev/null +++ b/frontend/src/queries/utils.ts @@ -0,0 +1,58 @@ +export type ILink = { + name: string; + url: string; +}; + +export type ISolution = { + solution_name: string; + header_title?: string; + header_description?: string; + logo_svg: { + url: string; + }; + url: string; +}; + +export type IAppsSection = { + solutions: ISolution[]; + arrowLink: IArrowLink; +}; + +export type ISocial = { + name: string; + url: string; + icon: { + url: string; + }; +}; + +export type IResourceLink = { + name: string; + url: string; +}; + +export type IResourceSection = { + title: string; + links: IResourceLink[]; +}; + +export type INavLink = { + title: string; + path_name?: string | null; + is_dropdown: boolean; +}; + +export type INavbarButton = { + link: ILink; +}; + +export type IKlerosLogo = { + logo_svg: { + url: string; + }; +}; + +export type IArrowLink = { + text: string; + link: ILink; +};