From dddb4712c350dd0497eea4a39750e4729c22f547 Mon Sep 17 00:00:00 2001 From: Ludovic Mermod Date: Sun, 2 Mar 2025 21:19:46 +0100 Subject: [PATCH 1/3] chore(deps): update directus submodule --- directus | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/directus b/directus index e535eab..50afc65 160000 --- a/directus +++ b/directus @@ -1 +1 @@ -Subproject commit e535eab7b3b799b7144d080171532186dd882f09 +Subproject commit 50afc65461f6308a936c0bba9624a19189590fa2 From 8a6ab9c4bd770e186adf8afd300255e3bf98f193 Mon Sep 17 00:00:00 2001 From: Ludovic Mermod Date: Sun, 2 Mar 2025 21:14:44 +0100 Subject: [PATCH 2/3] feat: add channels banner --- src/components/ChannelsList.tsx | 33 +++++++++++++++++++++++++++++ src/pages/index.tsx | 28 +++++++++++++++++------- src/styles/ChannelsList.module.scss | 24 +++++++++++++++++++++ 3 files changed, 77 insertions(+), 8 deletions(-) create mode 100644 src/components/ChannelsList.tsx create mode 100644 src/styles/ChannelsList.module.scss diff --git a/src/components/ChannelsList.tsx b/src/components/ChannelsList.tsx new file mode 100644 index 0000000..8c3bca6 --- /dev/null +++ b/src/components/ChannelsList.tsx @@ -0,0 +1,33 @@ +import DirectusImage from "./DirectusImage"; +import { useTranslationTable } from "@/locales"; +import styles from "@/styles/ChannelsList.module.scss"; +import { DirectusFile } from "@directus/sdk"; + +function Channel({ file }: { file: DirectusFile }) { + const tt = useTranslationTable(); + + return ( + + +

{file.title || tt.join_our_channels}

+ + ); +} + +export default function ChannelsList(props: { channels: DirectusFile[] }) { + return ( +
+ {props.channels + .sort((a, b) => a.title?.localeCompare(b.title || "") || -1) + .map((c) => ( + + ))} +
+ ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 910d28c..c1cc73d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,6 +3,7 @@ import Decoration from "@/assets/decoration.svg"; import PreviewImage from "@/assets/galleryPreview.png"; import AssociationDescription from "@/components/AssociationDescription"; import Button from "@/components/Button"; +import ChannelsList from "@/components/ChannelsList"; import DirectusImage from "@/components/DirectusImage"; import Gallery from "@/components/Gallery"; import MembersList from "@/components/MembersList"; @@ -16,11 +17,7 @@ import { getDirectusImageUrl, populateLayoutProps, } from "@/directus"; -import { - getTranslation, - queryTranslations, - useTranslationTable, -} from "@/locales"; +import { getTranslation, useTranslationTable } from "@/locales"; import styles from "@/styles/Homepage.module.scss"; import { Association, @@ -77,6 +74,8 @@ export default function Home( + +
= populateLayoutProps(async (_) => { + var association = await directus().request( + readSingleton("association", { + fields: [ + "*", + // @ts-expect-error + { translations: ["*"] }, + // @ts-expect-error + { channels: ["*", { directus_files_id: ["*"] }] }, + ], + }) + ); + + // @ts-expect-error + association.channels = association.channels.map((c) => c.directus_files_id); + return { props: { - association: await directus().request( - readSingleton("association", queryTranslations as any) - ), + association, partners: (await directus() .request( readItems("association_partners", { diff --git a/src/styles/ChannelsList.module.scss b/src/styles/ChannelsList.module.scss new file mode 100644 index 0000000..a76b0a4 --- /dev/null +++ b/src/styles/ChannelsList.module.scss @@ -0,0 +1,24 @@ +.image { + width: 6rem; + height: 6rem; + clip-path: circle(); +} + +.channel { + max-width: 6rem; +} + +.list { + padding: 1rem; + + display: flex; + gap: 2rem; + + p { + margin: 0.5rem 0 0 0; + font-weight: 400; + + color: #eee; + text-align: center; + } +} From 8a34d677d87a00d61a342c31509030cf853e33f9 Mon Sep 17 00:00:00 2001 From: Noe Terrier Date: Sun, 2 Mar 2025 23:54:36 +0100 Subject: [PATCH 3/3] feat: use social link instead of files and UI changes --- directus | 2 +- src/components/ChannelsList.tsx | 36 ++++++++++++++++------------- src/pages/index.tsx | 7 +++--- src/styles/ChannelsList.module.scss | 27 ++++++++++++++++++---- 4 files changed, 47 insertions(+), 25 deletions(-) diff --git a/directus b/directus index 50afc65..e680c17 160000 --- a/directus +++ b/directus @@ -1 +1 @@ -Subproject commit 50afc65461f6308a936c0bba9624a19189590fa2 +Subproject commit e680c17d2bc0e5e75930d1a1fdd448ee03ce538d diff --git a/src/components/ChannelsList.tsx b/src/components/ChannelsList.tsx index 8c3bca6..a9377c0 100644 --- a/src/components/ChannelsList.tsx +++ b/src/components/ChannelsList.tsx @@ -1,33 +1,37 @@ import DirectusImage from "./DirectusImage"; import { useTranslationTable } from "@/locales"; import styles from "@/styles/ChannelsList.module.scss"; -import { DirectusFile } from "@directus/sdk"; - -function Channel({ file }: { file: DirectusFile }) { - const tt = useTranslationTable(); +import { SocialLink } from "@/types/aliases"; +function Channel({ channel }: { channel: SocialLink }) { return ( - + -

{file.title || tt.join_our_channels}

+

{channel.account_name}

 ); } -export default function ChannelsList(props: { channels: DirectusFile[] }) { +export default function ChannelsList(props: { channels: SocialLink[] }) { + const tt = useTranslationTable(); return ( -
- {props.channels - .sort((a, b) => a.title?.localeCompare(b.title || "") || -1) - .map((c) => ( - - ))} +
+

{tt["join-our-channels"]}

+
+ {props.channels + .sort( + (a, b) => a.account_name?.localeCompare(b.account_name || "") || -1 + ) + .map((c) => ( + + ))} +
); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c1cc73d..a6b170e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -74,7 +74,7 @@ export default function Home( - +
@@ -117,13 +117,12 @@ export const getServerSideProps: GetServerSideProps< // @ts-expect-error { translations: ["*"] }, // @ts-expect-error - { channels: ["*", { directus_files_id: ["*"] }] }, + { channels: ["*", { social_links_id: ["*"] }] }, ], }) ); - // @ts-expect-error - association.channels = association.channels.map((c) => c.directus_files_id); + association.channels = association.channels?.map((c) => c.social_links_id); return { props: { diff --git a/src/styles/ChannelsList.module.scss b/src/styles/ChannelsList.module.scss index a76b0a4..65064ad 100644 --- a/src/styles/ChannelsList.module.scss +++ b/src/styles/ChannelsList.module.scss @@ -1,3 +1,15 @@ +@use "./utilities/variables"; + +.main { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: variables.$white-background-color; + padding-top: 2rem; +} + .image { width: 6rem; height: 6rem; @@ -6,19 +18,26 @@ .channel { max-width: 6rem; + + &:hover { + transition: transform 0.2s ease; + transform: translateY(-5px); + } } .list { - padding: 1rem; - + padding-top: 1rem; display: flex; - gap: 2rem; + gap: 4rem; + width: 100%; + align-items: baseline; + justify-content: center; p { margin: 0.5rem 0 0 0; font-weight: 400; - color: #eee; + color: variables.$dark-text-color; text-align: center; } }