From 75449212316e4c8a1c0af108a664bf633c764e11 Mon Sep 17 00:00:00 2001
From: ndthanhdev <ndthanhdev@outlook.com>
Date: Fri, 25 Jul 2025 02:22:04 +0700
Subject: [PATCH] feat: add frameUrl support to Media and ProjectCard
 components

---
 .../fragments/project-card/index.tsx          | 20 +++++++---
 .../fragments/project-card/styles.ts          | 40 ++++++++++++++-----
 .../src/components/screens/projects/index.tsx |  2 +
 apps/app/src/hooks/use-apps.ts                |  1 +
 4 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/apps/app/src/components/fragments/project-card/index.tsx b/apps/app/src/components/fragments/project-card/index.tsx
index 55d6d3f2..357b4548 100644
--- a/apps/app/src/components/fragments/project-card/index.tsx
+++ b/apps/app/src/components/fragments/project-card/index.tsx
@@ -2,23 +2,32 @@ import * as muiIcon from "@mui/icons-material";
 import * as mui from "@mui/material";
 import { Link as GatsbyLink } from "gatsby";
 
-import { styles } from "./styles";
+import { styles, useMediaStyles } from "./styles";
 
 export interface MediaProps {
+	frameUrl?: string;
 	title: string;
-	url: string;
 }
 
-export const Media = ({ title, url }: MediaProps) => {
+export const Media = (props: MediaProps) => {
+	const { frameUrl, title } = props;
+
+	const styles = useMediaStyles(props);
+
 	return (
 		<mui.Box css={styles.media}>
-			<iframe css={styles.mediaIframe} src={url} title={title} />
+			{frameUrl ? (
+				<iframe css={styles.mediaIframe} src={frameUrl} title={title} />
+			) : (
+				<muiIcon.Language css={styles.mediaNoFrame} />
+			)}
 		</mui.Box>
 	);
 };
 
 export interface ProjectCardProps {
 	description?: string;
+	frameUrl?: string;
 	onCopy?: () => void;
 	title: string;
 	url: string;
@@ -26,13 +35,14 @@ export interface ProjectCardProps {
 
 export const ProjectCard = ({
 	description,
+	frameUrl,
 	onCopy,
 	title,
 	url,
 }: ProjectCardProps) => {
 	return (
 		<mui.Card css={styles.root}>
-			<mui.CardMedia component={Media} title={title} url={url} />
+			<mui.CardMedia component={Media} frameUrl={frameUrl} title={title} />
 			<mui.Divider />
 			<mui.CardContent css={styles.content}>
 				<mui.Typography gutterBottom variant="h5">
diff --git a/apps/app/src/components/fragments/project-card/styles.ts b/apps/app/src/components/fragments/project-card/styles.ts
index 3ff7fa17..c4ac9eb2 100644
--- a/apps/app/src/components/fragments/project-card/styles.ts
+++ b/apps/app/src/components/fragments/project-card/styles.ts
@@ -2,6 +2,8 @@ import { css } from "@emotion/react";
 import { type AppTheme } from "@n8v/app/theme";
 import { ellipsis } from "polished";
 
+import type { MediaProps } from ".";
+
 export const styles = {
 	actions: () => css({ justifyContent: "end", marginTop: "auto" }),
 
@@ -16,14 +18,32 @@ export const styles = {
 		...ellipsis("100%", 3),
 	}),
 
-	media: (theme: AppTheme) =>
+	root: (theme: AppTheme) =>
 		css({
-			height: theme.spacing(27),
-			overflow: "hidden",
-			pointerEvents: "none",
-			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			height: theme.spacing(50),
 			width: theme.spacing(40),
 		}),
+};
+
+export const useMediaStyles = (props: MediaProps) => ({
+	media: (theme: AppTheme) =>
+		css([
+			{
+				color: theme.palette.text.secondary,
+				height: theme.spacing(27),
+				overflow: "hidden",
+				pointerEvents: "none",
+				position: "relative",
+				width: theme.spacing(40),
+			},
+			!props.frameUrl && {
+				alignItems: "center",
+				display: "flex",
+				justifyContent: "center",
+			},
+		]),
 
 	mediaIframe: () =>
 		css({
@@ -36,11 +56,9 @@ export const styles = {
 			width: "500%",
 		}),
 
-	root: (theme: AppTheme) =>
+	mediaNoFrame: (theme: AppTheme) =>
 		css({
-			display: "flex",
-			flexDirection: "column",
-			height: theme.spacing(50),
-			width: theme.spacing(40),
+			height: theme.spacing(10),
+			width: theme.spacing(10),
 		}),
-};
+});
diff --git a/apps/app/src/components/screens/projects/index.tsx b/apps/app/src/components/screens/projects/index.tsx
index f3c510c2..2127ff32 100644
--- a/apps/app/src/components/screens/projects/index.tsx
+++ b/apps/app/src/components/screens/projects/index.tsx
@@ -9,6 +9,7 @@ import { styles } from "./styles";
 
 export interface Project {
 	description?: string;
+	frameUrl?: string;
 	title: string;
 	url: string;
 }
@@ -30,6 +31,7 @@ export const ProjectsScreen = ({
 				{projects.map((project) => (
 					<ProjectCard
 						description={project.description}
+						frameUrl={project.frameUrl}
 						key={project.url}
 						onCopy={() => {
 							onCopy?.(project.url);
diff --git a/apps/app/src/hooks/use-apps.ts b/apps/app/src/hooks/use-apps.ts
index 05e6f0c7..65ecc38c 100644
--- a/apps/app/src/hooks/use-apps.ts
+++ b/apps/app/src/hooks/use-apps.ts
@@ -8,6 +8,7 @@ export const useProjects = () =>
 				{
 					description:
 						"A simple counter app compiled to WebAssembly, written in Rust.",
+					frameUrl: "/apps/counter",
 					title: "Wasm Counter",
 					url: "/apps/counter",
 				},