System-End/campfire
1
0
Fork 0
mirror of https://github.com/System-End/campfire.git synced 2026-04-19 22:05:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add links to event logos

Browse source
This commit is contained in:
ascpixi 2025-11-20 20:08:33 -05:00
parent ec1be988fd
commit c60c060e69
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/App.tsx
View file

@ -391,6 +391,7 @@ function App() {
videoButtonText='Watch the video'
videoUrl="https://www.youtube.com/watch?v=H5RPsCMl3uM"
videoButtonColor="#FF4186"
eventUrl="https://counterspell.hackclub.com/"
/>
<StoryCard
@ -402,6 +403,7 @@ function App() {
videoButtonText='Check out vid!'
videoUrl="https://www.youtube.com/watch?v=8iM1W8kXrQA"
videoButtonColor="#AF8D67"
eventUrl="https://scrapyard.hackclub.com/"
/>
<StoryCard
@ -413,6 +415,7 @@ function App() {
videoButtonText='Video here!'
videoUrl="https://www.youtube.com/watch?v=vvdoW2gh9YU"
videoButtonColor="#3F709A"
eventUrl="https://daydream.hackclub.com/"
/>
</div>
</div>

21
frontend/src/components/StoryCard.tsx
View file

@ -1,4 +1,4 @@
function StoryCard({ imageSrc, imageAlt, titleImageSrc, titleImageAlt, description, videoUrl, videoButtonText, videoButtonColor }: {
function StoryCard({ imageSrc, imageAlt, titleImageSrc, titleImageAlt, description, videoUrl, videoButtonText, videoButtonColor, eventUrl }: {
imageSrc: string;
imageAlt: string;
titleImageSrc: string;
@ -7,6 +7,7 @@ function StoryCard({ imageSrc, imageAlt, titleImageSrc, titleImageAlt, descripti
videoUrl: string;
videoButtonText: string;
videoButtonColor: string;
eventUrl: string;
}) {
return (
<div className="bg-[url(ui/step-bg.png)] bg-no-repeat bg-cover md:bg-none md:bg-white relative p-6 pb-24 flex items-center flex-1 basis-0 flex-col gap-4 md:gap-2 md:shadow-[16px_16px_0px_0px_rgba(0,0,0,0.3)]">
@ -17,14 +18,16 @@ function StoryCard({ imageSrc, imageAlt, titleImageSrc, titleImageAlt, descripti
/>
<div className="p-2 flex flex-col">
<img
src={titleImageSrc}
alt={titleImageAlt}
className="mb-2 h-full w-full"
style={{
filter: "drop-shadow(0px 4px 4px rgba(0,0,0,0.25))"
}}
/>
<a className="transition-transform hover:scale-105 active:scale-95 cursor-pointer" href={eventUrl} target="_blank">
<img
src={titleImageSrc}
alt={titleImageAlt}
className="mb-2 h-full w-full"
style={{
filter: "drop-shadow(0px 4px 4px rgba(0,0,0,0.25))"
}}
/>
</a>
<p
className="text-black h-max w-full text-2xl font-source-serif-pro"