+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/countdown/index.tsx b/src/app/interface/countdown/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7b61ac1834c3b8739cd397cd55131541242bf037
--- /dev/null
+++ b/src/app/interface/countdown/index.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils"
+
+export function Countdown({
+ remainingTimeInSec,
+ progressPercent
+}: {
+ remainingTimeInSec: number,
+ progressPercent: number
+}) {
+ return (
+
+ {/*
+
+ {
+ remainingTimeInSec
+ }s
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/interface/fonts/index.tsx b/src/app/interface/fonts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6e67106f512fff4c207ca9df1df44f9846f67790
--- /dev/null
+++ b/src/app/interface/fonts/index.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import { Grandstander, Klee_One } from 'next/font/google'
+
+// If loading a variable font, you don't need to specify the font weight
+export const headingFont = Grandstander({ subsets: ['latin'] })
+export const paragraphFont = Klee_One({ subsets: ['latin'], weight: "600" })
diff --git a/src/app/interface/generate/index.tsx b/src/app/interface/generate/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..15f73f58740c8426564e7fa4e75b8d529dfd2275
--- /dev/null
+++ b/src/app/interface/generate/index.tsx
@@ -0,0 +1,533 @@
+"use client"
+
+import { useEffect, useRef, useState, useTransition } from "react"
+import { useSpring, animated } from "@react-spring/web"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import useSmoothScroll from "react-smooth-scroll-hook"
+import { split } from "sentence-splitter"
+
+import { useToast } from "@/components/ui/use-toast"
+import { cn } from "@/lib/utils"
+import { headingFont } from "@/app/interface/fonts"
+import { useCharacterLimit } from "@/lib/useCharacterLimit"
+import { generateStoryLines } from "@/app/server/actions/generateStoryLines"
+import { Story, StoryLine, TTSVoice } from "@/types"
+import { TooltipProvider } from "@radix-ui/react-tooltip"
+import { useCountdown } from "@/lib/useCountdown"
+import { useAudio } from "@/lib/useAudio"
+
+import { Countdown } from "../countdown"
+import { generateImage } from "@/app/server/actions/generateImage"
+
+type Stage = "generate" | "finished"
+
+export function Generate() {
+ const router = useRouter()
+ const pathname = usePathname()
+ const searchParams = useSearchParams()
+ const searchParamsEntries = searchParams ? Array.from(searchParams.entries()) : []
+ const [_isPending, startTransition] = useTransition()
+
+ const scrollRef = useRef
+
+ {isLocked ?
+
+ )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..73c9e3f1ed234c343ac1cabc41ef817032707a02
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+import { cn } from '@/lib/utils'
+
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: '🌜 AI Bedtime Story 🛏️',
+ description: '🌜 AI Bedtime Story 🛏️',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/src/app/main.tsx b/src/app/main.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e4eec677b8c745dac65acecd0078c42f3ed115d8
--- /dev/null
+++ b/src/app/main.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import { Toaster } from "@/components/ui/toaster"
+import { paragraphFont } from "@/app/interface/fonts"
+import { Background } from "./interface/background"
+import { Generate } from "./interface/generate"
+import { BottomBar } from "./interface/bottom-bar"
+
+export function Main() {
+
+ return (
+
+
+
+
+ {assetUrl ?
+
+
+ {assetUrl && 
}
+
: null}
+
+
+
+
+ setPromptDraft(e.target.value)}
+ onKeyDown={({ key }) => {
+ if (key === 'Enter') {
+ if (!isLocked) {
+ handleSubmit()
+ }
+ }
+ }}
+ disabled={isLocked}
+ />
+
+
+ {nbCharsUsed}
+ /
+ {nbCharsLimits}
+
+
+
+
+ setOverSubmitButton(true)}
+ onMouseLeave={() => setOverSubmitButton(false)}
+ className={cn(
+ storyLines?.length
+ ? `text-2xl leading-10 px-4 h-16`
+ : `text-3xl leading-14 px-6 h-[70px]`,
+ `rounded-full`,
+ `transition-all duration-300 ease-in-out`,
+ `backdrop-blur-sm`,
+ isLocked
+ ? `bg-blue-900/70 text-sky-50/80 border-yellow-600/10`
+ : `bg-yellow-400/70 text-sky-50 border-yellow-800/20 hover:bg-yellow-400/80`,
+ `text-center`,
+ `w-full`,
+ `border`,
+ headingFont.className,
+ // `transition-all duration-300`,
+ // `hover:animate-bounce`
+ )}
+ disabled={isLocked}
+ onClick={handleSubmit}
+ >
+ {isLocked
+ ? `Dreaming..`
+ : "Dream 🌙"
+ }
+
+
+ {
+ /*
+ !!storyLines.length &&
+ setOverPauseButton(true)}
+ onMouseLeave={() => setOverPauseButton(false)}
+ className={cn(
+ `px-4 h-16`,
+ `rounded-full`,
+ `transition-all duration-300 ease-in-out`,
+ `backdrop-blur-sm`,
+ isLocked
+ ? `bg-orange-200/30 text-sky-50/60 border-yellow-600/10`
+ : `bg-yellow-400/50 text-sky-50 border-yellow-800/20 hover:bg-yellow-400/60`,
+ `text-center`,
+ `w-full`,
+ `text-2xl `,
+ `border`,
+ headingFont.className,
+ // `transition-all duration-300`,
+ // `hover:animate-bounce`
+ )}
+ disabled={isLocked}
+ onClick={togglePause}
+ >
+ {isPlaying || isSwitchingTracks
+ ? "Pause 🔊"
+ : "Play 🔊"
+ }
+
+
+ */
+ }
+
+
+
+
+
+ {assetUrl ?
+
+
+ {assetUrl && }
+
: null}
+
+
+
+
+
+ {storyLines.map((line, i) =>
+
+
+
)}
+
+
+ {
+ line.text.split("").map((c, j, arr) => {c || " "})
+ }
+
+ {images.at(i) ? })
: null}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50dbba57a98de8ce2820ae4063653dc35d652245
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Head from "next/head"
+import Script from "next/script"
+
+import { cn } from "@/lib/utils"
+
+import { Main } from "./main"
+
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
+
+export default function Page() {
+ const [isLoaded, setLoaded] = useState(false)
+ useEffect(() => { setLoaded(true) }, [])
+ return (
+ <>
+
+
+
+
+
+ {children}
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+
+
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+