feat: add frameUrl support to Media and ProjectCard components (#80)

Author: ndthanhdev

apps/app/src/components/fragments/project-card/index.tsx

@@ -2,37 +2,47 @@ 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;
 }
 
 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">

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),
 		}),
-};
+});

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);

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",
 				},