From fbb81471dab1d18003386423f17304ae3457dcea Mon Sep 17 00:00:00 2001 From: Will Chen Date: Mon, 28 Apr 2025 22:07:25 -0700 Subject: [PATCH] Inspiration prompts for home screen (#38) --- src/pages/home.tsx | 153 ++++++------- src/prompts/inspiration_prompts.tsx | 326 ++++++++++++++++++++++++++++ 2 files changed, 396 insertions(+), 83 deletions(-) create mode 100644 src/prompts/inspiration_prompts.tsx diff --git a/src/pages/home.tsx b/src/pages/home.tsx index e489573..08b4a4d 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -8,11 +8,12 @@ import { useLoadApps } from "@/hooks/useLoadApps"; import { useSettings } from "@/hooks/useSettings"; import { SetupBanner } from "@/components/SetupBanner"; import { isPreviewOpenAtom } from "@/atoms/viewAtoms"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useCallback } from "react"; import { useStreamChat } from "@/hooks/useStreamChat"; import { HomeChatInput } from "@/components/chat/HomeChatInput"; import { usePostHog } from "posthog-js/react"; import { PrivacyBanner } from "@/components/TelemetryBanner"; +import { INSPIRATION_PROMPTS } from "@/prompts/inspiration_prompts"; export default function HomePage() { const [inputValue, setInputValue] = useAtom(homeChatInputValueAtom); @@ -28,6 +29,22 @@ export default function HomePage() { // Get the appId from search params const appId = search.appId ? Number(search.appId) : null; + // State for random prompts + const [randomPrompts, setRandomPrompts] = useState< + typeof INSPIRATION_PROMPTS + >([]); + + // Function to get random prompts + const getRandomPrompts = useCallback(() => { + const shuffled = [...INSPIRATION_PROMPTS].sort(() => 0.5 - Math.random()); + return shuffled.slice(0, 5); + }, []); + + // Initialize random prompts + useEffect(() => { + setRandomPrompts(getRandomPrompts()); + }, [getRandomPrompts]); + // Redirect to app details page if appId is present useEffect(() => { if (appId) { @@ -92,89 +109,59 @@ export default function HomePage() {
-
- {[ - { - icon: ( - - - - - ), - label: "TODO list app", - }, - { - icon: ( - - - - ), - label: "Landing Page", - }, - { - icon: ( - - - - ), - label: "Sign Up Form", - }, - ].map((item, index) => ( - + ))} +
+ + - ))} + + + + More ideas + +
diff --git a/src/prompts/inspiration_prompts.tsx b/src/prompts/inspiration_prompts.tsx new file mode 100644 index 0000000..c159766 --- /dev/null +++ b/src/prompts/inspiration_prompts.tsx @@ -0,0 +1,326 @@ +export const INSPIRATION_PROMPTS = [ + { + icon: ( + + + + + ), + label: "TODO list app", + }, + { + icon: ( + + + + ), + label: "Landing Page", + }, + { + icon: ( + + + + ), + label: "Sign Up Form", + }, + { + icon: ( + + + + + ), + label: "Mood Journal & Tracker", + }, + { + icon: ( + + + + ), + label: "Interactive Story Game", + }, + { + icon: ( + + + + ), + label: "Recipe Finder & Meal Planner", + }, + { + icon: ( + + + + ), + label: "Personal Finance Dashboard", + }, + { + icon: ( + + + + + ), + label: "Travel Memory Map", + }, + { + icon: ( + + + + ), + label: "AI Writing Assistant", + }, + { + icon: ( + + + + ), + label: "Emoji Translator", + }, + { + icon: ( + + + + ), + label: "Habit Streak Tracker", + }, + { + icon: ( + + + + ), + label: "Newsletter Creator", + }, + { + icon: ( + + + + ), + label: "Music Discovery App", + }, + { + icon: ( + + + + ), + label: "3D Portfolio Viewer", + }, + { + icon: ( + + + + ), + label: "AI Image Generator", + }, + { + icon: ( + + + + ), + label: "Pomodoro Focus Timer", + }, + { + icon: ( + + + + ), + label: "Virtual Avatar Builder", + }, +];