diff --git a/src/components/Hack/HackEditForm.tsx b/src/components/Hack/HackEditForm.tsx index 66116a0..c499c6b 100644 --- a/src/components/Hack/HackEditForm.tsx +++ b/src/components/Hack/HackEditForm.tsx @@ -4,12 +4,14 @@ import React from "react"; import Markdown from "@/components/Markdown/Markdown"; import TagSelector from "@/components/Submit/TagSelector"; import { baseRoms } from "@/data/baseRoms"; +import { getScreenshotTutorial } from "@/data/screenshotTutorials"; import Image from "next/image"; import { createClient } from "@/utils/supabase/client"; import { updateHack, saveHackCovers, presignCoverUpload } from "@/app/hack/actions"; import SortableCovers from "@/components/Hack/SortableCovers"; import Select from "@/components/Primitives/Select"; import type { Database } from "@/types/db"; +import { FiExternalLink } from "react-icons/fi"; interface HackEditFormProps { slug: string; @@ -109,6 +111,7 @@ export default function HackEditForm({ slug, initial }: HackEditFormProps) { const platformEntry = React.useMemo(() => baseRoms.find(r => r.id === baseRom), [baseRom]); const allowedSizes = platformEntry ? getAllowedSizesForPlatform(platformEntry.platform) : []; + const tutorialInfo = React.useMemo(() => getScreenshotTutorial(platformEntry?.platform), [platformEntry]); const overLimit = coverItems.length > MAX_COVERS; // Change detection helpers @@ -384,6 +387,20 @@ export default function HackEditForm({ slug, initial }: HackEditFormProps) { {allowedSizes.length > 0 && (
Allowed sizes: {allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}
)} + {tutorialInfo && ( +
+ Need help taking screenshots? Watch our{" "}
+
+ {tutorialInfo.emulatorName} tutorial
+
Upload screenshots of your game. Allowed sizes: {allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}.
+Upload screenshots of your game. Allowed sizes: {allowedSizes.map((s) => `${s.w}x${s.h}`).join(", ")}.
+ )} + {tutorialInfo && ( +
+ Need help taking screenshots? Watch our{" "}
+
+ {tutorialInfo.emulatorName} tutorial
+