diff --git a/src/components/QuickLinks/QuickLinkCards.tsx b/src/components/QuickLinks/QuickLinkCards.tsx index 847a7c3..4f70ac3 100644 --- a/src/components/QuickLinks/QuickLinkCards.tsx +++ b/src/components/QuickLinks/QuickLinkCards.tsx @@ -23,6 +23,11 @@ export default function QuickLinkCards({ objectFit="cover" /> */}
{quick.name}
+ {quick.subtitle !== null ? ( +
+ {quick.subtitle} +
+ ) : null}

{quick.description}

diff --git a/src/components/QuickLinks/types.tsx b/src/components/QuickLinks/types.tsx index 1a89958..5604d94 100644 --- a/src/components/QuickLinks/types.tsx +++ b/src/components/QuickLinks/types.tsx @@ -1,6 +1,9 @@ +import React from "react"; + export type QuickLink = { - name: string; - description: string; + name: string | React.ReactNode; + subtitle?: string | React.ReactNode | null; + description: string | React.ReactNode; link: string; - linkText: string; + linkText: string | React.ReactNode; }; diff --git a/src/pages/tools/built-in/index.tsx b/src/pages/tools/built-in/index.tsx new file mode 100644 index 0000000..77318d5 --- /dev/null +++ b/src/pages/tools/built-in/index.tsx @@ -0,0 +1,56 @@ +import getAppProps, { AppProps } from "@/components/WithAppProps"; +import { QuickLink } from "@/components/QuickLinks/types"; +import React from "react"; +import Layout from "@/components/Layout"; +import QuickLinkCards from "@/components/QuickLinks/QuickLinkCards"; + +const pageName = "Built in tools"; + +type BuiltInToolsProps = { appProps: AppProps }; + +export function BuiltInTools({ appProps }: BuiltInToolsProps): JSX.Element { + const quickLinks: QuickLink[] = [ + { + name: "MIDI to ArcadeMidi", + // subtitle: "By UnsignedArduino", + description: + "Converts your MIDI files to images compatible with the ArcadeMIDI extension!", + link: "/tools/built-in/midi-to-arcademidi", + linkText: "Convert your MIDI files", + }, + ]; + + return ( + +

Welcome to Awesome Arcade{"'"}s built in tools!

+

+ This is a list of all of Awesome Arcade{"'"}s built in tools, which can + be used directly on the Awesome Arcade website!{" "} + + It was definitely not because UnsignedArduino was too lazy to create a + new website for his new tools. + +

+ +
+ ); +} + +export async function getStaticProps(): Promise<{ + props: BuiltInToolsProps; +}> { + return { + props: { + appProps: await getAppProps(), + }, + }; +} + +export default BuiltInTools; diff --git a/src/pages/tools.tsx b/src/pages/tools/index.tsx similarity index 90% rename from src/pages/tools.tsx rename to src/pages/tools/index.tsx index 4e18a4b..3100597 100644 --- a/src/pages/tools.tsx +++ b/src/pages/tools/index.tsx @@ -1,6 +1,6 @@ import React from "react"; -import Layout from "../components/Layout"; -import getAppProps, { AppProps } from "../components/WithAppProps"; +import Layout from "@/components/Layout"; +import getAppProps, { AppProps } from "@/components/WithAppProps"; import Link from "next/link"; import { promises as fs } from "fs"; import path from "path"; @@ -11,7 +11,7 @@ import { AnalyticEvents } from "@/components/Analytics"; import Tippy from "@tippyjs/react"; import { useSession } from "next-auth/react"; import { parseToolXML, Tool } from "@/scripts/Utils/ParseListXML"; -import { useFeatureIsOn } from "@growthbook/growthbook-react"; +import { useFeatureIsOn, useFeatureValue } from "@growthbook/growthbook-react"; import { stringToBool } from "@/scripts/Utils/ParseListXML/helpers"; const pageName = "Tools"; @@ -23,6 +23,11 @@ type ToolsProps = { export function Tools({ appProps, list }: ToolsProps): JSX.Element { const removeOldHome = useFeatureIsOn("remove-old-home"); + const showEmbeddedTools = useFeatureIsOn("embedded-tools"); + const embeddedToolsTitle = useFeatureValue( + "embedded-tools-title", + "Try out Awesome Arcade's built-in tools!", + ); const { data: session } = useSession(); @@ -141,6 +146,15 @@ export function Tools({ appProps, list }: ToolsProps): JSX.Element { guide on how to submit a tool to Awesome Arcade!

+ {showEmbeddedTools ? ( +
+ + {embeddedToolsTitle} + +
+ ) : ( + <> + )}

Looking for Awesome Arcade Extensions? They have been split up into the{" "} - Extensions page! (Which you can also find in the - navigation bar!) + Extensions page! (Which you can also find in + the navigation bar!)

);