From 94ba29b0f55138b3291839d7361ba8edd5dd0258 Mon Sep 17 00:00:00 2001 From: Narwhal Date: Mon, 3 Mar 2025 23:45:05 -0600 Subject: [PATCH 1/6] feat(frontend): implement expandable project cards and fetch public projects query --- .../components/expandable-card-demo-grid.tsx | 295 ++++++++++++++++ .../expandable-card-demo-standard.tsx | 319 ++++++++++++++++++ frontend/src/components/root/expand-card.tsx | 176 ++++++++++ .../src/components/root/projects-section.tsx | 81 +---- frontend/src/graphql/request.ts | 16 + frontend/src/hooks/use-outside-click.tsx | 24 ++ 6 files changed, 837 insertions(+), 74 deletions(-) create mode 100644 frontend/src/components/expandable-card-demo-grid.tsx create mode 100644 frontend/src/components/expandable-card-demo-standard.tsx create mode 100644 frontend/src/components/root/expand-card.tsx create mode 100644 frontend/src/hooks/use-outside-click.tsx diff --git a/frontend/src/components/expandable-card-demo-grid.tsx b/frontend/src/components/expandable-card-demo-grid.tsx new file mode 100644 index 00000000..63e66b2d --- /dev/null +++ b/frontend/src/components/expandable-card-demo-grid.tsx @@ -0,0 +1,295 @@ +"use client"; +import Image from "next/image"; +import React, { useEffect, useId, useRef, useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { useOutsideClick } from "@/hooks/use-outside-click"; + +export default function ExpandableCardDemo() { + const [active, setActive] = useState<(typeof cards)[number] | boolean | null>( + null + ); + const id = useId(); + const ref = useRef(null); + + useEffect(() => { + function onKeyDown(event: KeyboardEvent) { + if (event.key === "Escape") { + setActive(false); + } + } + + if (active && typeof active === "object") { + document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = "auto"; + } + + window.addEventListener("keydown", onKeyDown); + return () => window.removeEventListener("keydown", onKeyDown); + }, [active]); + + useOutsideClick(ref, () => setActive(null)); + + return ( + <> + + {active && typeof active === "object" && ( + + )} + + + {active && typeof active === "object" ? ( +
+ setActive(null)} + > + + + + + {active.title} + + +
+
+
+ + {active.title} + + + {active.description} + +
+ + + {active.ctaText} + +
+
+ + {typeof active.content === "function" + ? active.content() + : active.content} + +
+
+ +
+ ) : null} + + + + ); +} + +export const CloseIcon = () => { + return ( + + + + + + ); +}; + +const cards = [ + { + description: "Lana Del Rey", + title: "Summertime Sadness", + src: "https://assets.aceternity.com/demos/lana-del-rey.jpeg", + ctaText: "Visit", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Lana Del Rey, an iconic American singer-songwriter, is celebrated for + her melancholic and cinematic music style. Born Elizabeth Woolridge + Grant in New York City, she has captivated audiences worldwide with + her haunting voice and introspective lyrics.

Her songs + often explore themes of tragic romance, glamour, and melancholia, + drawing inspiration from both contemporary and vintage pop culture. + With a career that has seen numerous critically acclaimed albums, Lana + Del Rey has established herself as a unique and influential figure in + the music industry, earning a dedicated fan base and numerous + accolades. +

+ ); + }, + }, + { + description: "Babbu Maan", + title: "Mitran Di Chhatri", + src: "https://assets.aceternity.com/demos/babbu-maan.jpeg", + ctaText: "Visit", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Babu Maan, a legendary Punjabi singer, is renowned for his soulful + voice and profound lyrics that resonate deeply with his audience. Born + in the village of Khant Maanpur in Punjab, India, he has become a + cultural icon in the Punjabi music industry.

His songs + often reflect the struggles and triumphs of everyday life, capturing + the essence of Punjabi culture and traditions. With a career spanning + over two decades, Babu Maan has released numerous hit albums and + singles that have garnered him a massive fan following both in India + and abroad. +

+ ); + }, + }, + + { + description: "Metallica", + title: "For Whom The Bell Tolls", + src: "https://assets.aceternity.com/demos/metallica.jpeg", + ctaText: "Visit", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Metallica, an iconic American heavy metal band, is renowned for their + powerful sound and intense performances that resonate deeply with + their audience. Formed in Los Angeles, California, they have become a + cultural icon in the heavy metal music industry.

Their + songs often reflect themes of aggression, social issues, and personal + struggles, capturing the essence of the heavy metal genre. With a + career spanning over four decades, Metallica has released numerous hit + albums and singles that have garnered them a massive fan following + both in the United States and abroad. +

+ ); + }, + }, + { + description: "Lord Himesh", + title: "Aap Ka Suroor", + src: "https://assets.aceternity.com/demos/aap-ka-suroor.jpeg", + ctaText: "Visit", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Himesh Reshammiya, a renowned Indian music composer, singer, and + actor, is celebrated for his distinctive voice and innovative + compositions. Born in Mumbai, India, he has become a prominent figure + in the Bollywood music industry.

His songs often feature + a blend of contemporary and traditional Indian music, capturing the + essence of modern Bollywood soundtracks. With a career spanning over + two decades, Himesh Reshammiya has released numerous hit albums and + singles that have garnered him a massive fan following both in India + and abroad. +

+ ); + }, + }, +]; diff --git a/frontend/src/components/expandable-card-demo-standard.tsx b/frontend/src/components/expandable-card-demo-standard.tsx new file mode 100644 index 00000000..b0925f56 --- /dev/null +++ b/frontend/src/components/expandable-card-demo-standard.tsx @@ -0,0 +1,319 @@ +"use client"; +import Image from "next/image"; +import React, { useEffect, useId, useRef, useState } from "react"; +import { AnimatePresence, motion } from "framer-motion"; +import { useOutsideClick } from "@/hooks/use-outside-click"; + +export default function ExpandableCardDemo() { + const [active, setActive] = useState<(typeof cards)[number] | boolean | null>( + null + ); + const ref = useRef(null); + const id = useId(); + + useEffect(() => { + function onKeyDown(event: KeyboardEvent) { + if (event.key === "Escape") { + setActive(false); + } + } + + if (active && typeof active === "object") { + document.body.style.overflow = "hidden"; + } else { + document.body.style.overflow = "auto"; + } + + window.addEventListener("keydown", onKeyDown); + return () => window.removeEventListener("keydown", onKeyDown); + }, [active]); + + useOutsideClick(ref, () => setActive(null)); + + return ( + <> + + {active && typeof active === "object" && ( + + )} + + + {active && typeof active === "object" ? ( +
+ setActive(null)} + > + + + + + {active.title} + + +
+
+
+ + {active.title} + + + {active.description} + +
+ + + {active.ctaText} + +
+
+ + {typeof active.content === "function" + ? active.content() + : active.content} + +
+
+ +
+ ) : null} + +
    + {cards.map((card, index) => ( + setActive(card)} + className="p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer" + > +
    + + {card.title} + +
    + + {card.title} + + + {card.description} + +
    +
    + + {card.ctaText} + +     + ))} +
+ + ); +} + +export const CloseIcon = () => { + return ( + + + + + + ); +}; + +const cards = [ + { + description: "Lana Del Rey", + title: "Summertime Sadness", + src: "https://assets.aceternity.com/demos/lana-del-rey.jpeg", + ctaText: "Play", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Lana Del Rey, an iconic American singer-songwriter, is celebrated for + her melancholic and cinematic music style. Born Elizabeth Woolridge + Grant in New York City, she has captivated audiences worldwide with + her haunting voice and introspective lyrics.

Her songs + often explore themes of tragic romance, glamour, and melancholia, + drawing inspiration from both contemporary and vintage pop culture. + With a career that has seen numerous critically acclaimed albums, Lana + Del Rey has established herself as a unique and influential figure in + the music industry, earning a dedicated fan base and numerous + accolades. +

+ ); + }, + }, + { + description: "Babbu Maan", + title: "Mitran Di Chhatri", + src: "https://assets.aceternity.com/demos/babbu-maan.jpeg", + ctaText: "Play", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Babu Maan, a legendary Punjabi singer, is renowned for his soulful + voice and profound lyrics that resonate deeply with his audience. Born + in the village of Khant Maanpur in Punjab, India, he has become a + cultural icon in the Punjabi music industry.

His songs + often reflect the struggles and triumphs of everyday life, capturing + the essence of Punjabi culture and traditions. With a career spanning + over two decades, Babu Maan has released numerous hit albums and + singles that have garnered him a massive fan following both in India + and abroad. +

+ ); + }, + }, + + { + description: "Metallica", + title: "For Whom The Bell Tolls", + src: "https://assets.aceternity.com/demos/metallica.jpeg", + ctaText: "Play", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Metallica, an iconic American heavy metal band, is renowned for their + powerful sound and intense performances that resonate deeply with + their audience. Formed in Los Angeles, California, they have become a + cultural icon in the heavy metal music industry.

Their + songs often reflect themes of aggression, social issues, and personal + struggles, capturing the essence of the heavy metal genre. With a + career spanning over four decades, Metallica has released numerous hit + albums and singles that have garnered them a massive fan following + both in the United States and abroad. +

+ ); + }, + }, + { + description: "Led Zeppelin", + title: "Stairway To Heaven", + src: "https://assets.aceternity.com/demos/led-zeppelin.jpeg", + ctaText: "Play", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ Led Zeppelin, a legendary British rock band, is renowned for their + innovative sound and profound impact on the music industry. Formed in + London in 1968, they have become a cultural icon in the rock music + world.

Their songs often reflect a blend of blues, hard + rock, and folk music, capturing the essence of the 1970s rock era. + With a career spanning over a decade, Led Zeppelin has released + numerous hit albums and singles that have garnered them a massive fan + following both in the United Kingdom and abroad. +

+ ); + }, + }, + { + description: "Mustafa Zahid", + title: "Toh Phir Aao", + src: "https://assets.aceternity.com/demos/toh-phir-aao.jpeg", + ctaText: "Play", + ctaLink: "https://ui.aceternity.com/templates", + content: () => { + return ( +

+ "Aawarapan", a Bollywood movie starring Emraan Hashmi, is + renowned for its intense storyline and powerful performances. Directed + by Mohit Suri, the film has become a significant work in the Indian + film industry.

The movie explores themes of love, + redemption, and sacrifice, capturing the essence of human emotions and + relationships. With a gripping narrative and memorable music, + "Aawarapan" has garnered a massive fan following both in + India and abroad, solidifying Emraan Hashmi's status as a + versatile actor. +

+ ); + }, + }, +]; diff --git a/frontend/src/components/root/expand-card.tsx b/frontend/src/components/root/expand-card.tsx new file mode 100644 index 00000000..6cb071a0 --- /dev/null +++ b/frontend/src/components/root/expand-card.tsx @@ -0,0 +1,176 @@ +'use client'; +import Image from 'next/image'; +import React, { useEffect, useId, useRef, useState } from 'react'; +import { AnimatePresence, motion } from 'framer-motion'; +import { useOutsideClick } from '@/hooks/use-outside-click'; +import { X } from 'lucide-react'; + +export function ExpandableCard({ projects }) { + const [active, setActive] = useState(null); + const [iframeUrl, setIframeUrl] = useState(''); + const id = useId(); + const ref = useRef(null); + + useEffect(() => { + function onKeyDown(event: KeyboardEvent) { + if (event.key === 'Escape') { + setActive(null); + } + } + + if (active && typeof active === 'object') { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'auto'; + } + + window.addEventListener('keydown', onKeyDown); + return () => window.removeEventListener('keydown', onKeyDown); + }, [active]); + + useOutsideClick(ref, () => setActive(null)); + + const getWebUrl = async (project) => { + if (!project) return; + console.log('project:', project); + const projectPath = project.path; + + try { + const response = await fetch( + `/api/runProject?projectPath=${encodeURIComponent(projectPath)}`, + { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + } + ); + const json = await response.json(); + const baseUrl = `http://${json.domain}`; + setIframeUrl(baseUrl); + setActive(project); + } catch (error) { + console.error('fetching url error:', error); + } + }; + + return ( + <> + + {active && ( + + )} + + + + {active ? ( +
+ setActive(null)} + > + + + + + + + + {active.name} + + +