-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(web): setup welcome section with CMS
- Loading branch information
1 parent
f1641b1
commit 447389e
Showing
6 changed files
with
115 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,106 @@ | ||
| import { GlassmorphicCard } from '@cuhacking/shared/ui/glassmorphic-card' | ||
| import { TerminalText } from '@cuhacking/shared/ui/terminal-text' | ||
| import { Socials } from '@website/shared/ui/socials' | ||
| import Socials from '@website/shared/ui/socials' | ||
| import { useEffect, useState } from 'react' | ||
|
|
||
| interface WelcomeData { | ||
| title: string | ||
| organization: string | ||
| date: string | ||
| callToAction: string | ||
| } | ||
|
|
||
| interface Media { | ||
| src: string | ||
| alt: string | ||
| } | ||
|
|
||
| interface IntroProps { | ||
| socials: { link: string, media: Media }[] | ||
| socials: { link: string, media: Media, name: string }[] | ||
| } | ||
|
|
||
| async function fetchWelcomeData(): Promise<WelcomeData | null> { | ||
| const query = ` | ||
| query { | ||
| Welcomes { | ||
| docs { | ||
| title | ||
| organization | ||
| date | ||
| callToAction | ||
| } | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| try { | ||
| const response = await fetch(`${import.meta.env.VITE_API_URL}/api/graphql`, { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify({ query }), | ||
| }) | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! status: ${response.status}`) | ||
| } | ||
|
|
||
| const data = await response.json() | ||
| const welcomeData = data.data.Welcomes.docs[0] // Assuming only one document or taking the first one | ||
| return { | ||
| title: welcomeData.title, | ||
| organization: welcomeData.organization, | ||
| date: welcomeData.date, | ||
| callToAction: welcomeData.callToAction, | ||
| } | ||
| } | ||
| catch (error) { | ||
| console.error('Failed to fetch welcome data:', error) | ||
| return null | ||
| } | ||
| } | ||
| // TODO: Refactor so that it takes in props that can communicate colours | ||
|
|
||
| export function Welcome({ socials }: IntroProps) { | ||
| const [welcomeData, setWelcomeData] = useState<WelcomeData | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| async function getData() { | ||
| const data = await fetchWelcomeData() | ||
| setWelcomeData(data) | ||
| } | ||
| getData() | ||
| }, []) | ||
|
|
||
| return ( | ||
| <GlassmorphicCard | ||
| variant="default" | ||
| className="flex flex-col items-start p-3.5 sm:p-6 gap-y-2.5" | ||
| > | ||
| <h2 className="text-2xl font-bold text-center">HELLO, WORLD</h2> | ||
| <div> | ||
| <TerminalText className="text-base"> | ||
| <p> | ||
| <span className="text-transparent bg-greendiant bg-clip-text"> | ||
| cuHacking | ||
| </span> | ||
| {' '} | ||
| is coming to you | ||
| <span className="text-transparent bg-greendiant bg-clip-text"> | ||
| {' '} | ||
| Mar. 14 - 16 2025 @ Carleton University 💚 | ||
| </span> | ||
| </p> | ||
| </TerminalText> | ||
| <TerminalText className="text-base"> | ||
| <p>In the meantime, check out all the cool stuff we're working on!</p> | ||
| </TerminalText> | ||
| <Socials socials={socials} className="justify-center pt-5" /> | ||
| </div> | ||
| </GlassmorphicCard> | ||
| welcomeData | ||
| ? ( | ||
| <GlassmorphicCard | ||
| variant="default" | ||
| className="flex flex-col items-start p-3.5 sm:p-6 gap-y-2.5" | ||
| > | ||
| <h2 className="text-2xl font-bold text-center">{welcomeData.title}</h2> | ||
| <div> | ||
| <TerminalText className="text-base"> | ||
| <p> | ||
| <span className="text-transparent bg-greendiant bg-clip-text"> | ||
| {welcomeData.organization} | ||
| </span> | ||
| {' '} | ||
| is coming to you | ||
| <span className="text-transparent bg-greendiant bg-clip-text"> | ||
| {' '} | ||
| {welcomeData.date} | ||
| </span> | ||
| </p> | ||
| </TerminalText> | ||
| <TerminalText className="text-base"> | ||
| <p>{welcomeData.callToAction}</p> | ||
| </TerminalText> | ||
| <Socials socials={socials} className="justify-center pt-5" /> | ||
| </div> | ||
| </GlassmorphicCard> | ||
| ) | ||
| : null | ||
| ) | ||
| } |