[V0_FILE]typescriptreact:file="notebook-configurator.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Step1 from "./step-1" import Step2 from "./step-2" export interface NotebookConfig { size: { name: string width: number height: number } type: { name: string preview: string } coverColor: string elasticColor: string } export default function NotebookConfigurator() { const [currentStep, setCurrentStep] = useState(1) const [config, setConfig] = useState({ size: { name: "Wide", width: 200, height: 160 }, type: { name: "Lined", preview: `repeating-linear-gradient( transparent, transparent 24px, #e5e5e5 24px, #e5e5e5 25px )`, }, coverColor: "#bddacd", elasticColor: "#000000", }) return (

{/* Exit fullscreen banner */}

To exit full screen, press esc

{currentStep === 1 && setCurrentStep(2)} />} {currentStep === 2 && setCurrentStep(1)} />}

) } [V0_FILE]typescriptreact:file="step-1.tsx" isMerged="true" isEdit="true" "use client" import { useState, useEffect } from "react" import { ArrowRight } from "lucide-react" import type { NotebookConfig } from "./notebook-configurator" interface Step1Props { config: NotebookConfig onUpdate: (config: NotebookConfig) => void onNext: () => void } const sizeOptions = [ { name: "Wide", width: 200, height: 160 }, { name: "Square", width: 160, height: 160 }, { name: "Tall", width: 140, height: 200 }, ] const typeOptions = [ { name: "Lined", preview: `repeating-linear-gradient( transparent, transparent 24px, #e5e5e5 24px, #e5e5e5 25px )`, }, { name: "Dotted", preview: `radial-gradient( circle at center, #e5e5e5 1px, transparent 1px )`, }, { name: "Blank", preview: "none" }, ] export default function Step1({ config, onUpdate, onNext }: Step1Props) { const [focusedSize, setFocusedSize] = useState(0) const [focusedType, setFocusedType] = useState(0) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowRight" && e.altKey) { onNext() return } switch (e.key) { case "ArrowRight": if (document.activeElement?.getAttribute("data-type") === "size") { setFocusedSize((prev) => Math.min(prev + 1, sizeOptions.length - 1)) } else if (document.activeElement?.getAttribute("data-type") === "type") { setFocusedType((prev) => Math.min(prev + 1, typeOptions.length - 1)) } break case "ArrowLeft": if (document.activeElement?.getAttribute("data-type") === "size") { setFocusedSize((prev) => Math.max(prev - 1, 0)) } else if (document.activeElement?.getAttribute("data-type") === "type") { setFocusedType((prev) => Math.max(prev - 1, 0)) } break case "Enter": case " ": if (document.activeElement?.getAttribute("data-type") === "size") { onUpdate({ ...config, size: sizeOptions[focusedSize] }) } else if (document.activeElement?.getAttribute("data-type") === "type") { onUpdate({ ...config, type: typeOptions[focusedType] }) } break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [config, focusedSize, focusedType, onUpdate, onNext]) return (

{/* Progress indicator */}

Step 1

Size

{/* Notebook preview */}

{/* Size and Type selection */}

Size

{sizeOptions.map((size, index) => ( ))}

Type

{typeOptions.map((type, index) => ( ))}

{/* Next step button */}

) } [V0_FILE]typescriptreact:file="step-2.tsx" isMerged="true" isEdit="true" "use client" import { ArrowLeft } from "lucide-react" import type { NotebookConfig } from "./notebook-configurator" interface Step2Props { config: NotebookConfig onUpdate: (config: NotebookConfig) => void onPrevious: () => void } const colorOptions = [ { name: "Navy", hex: "#014689" }, { name: "Tan", hex: "#c5a07a" }, { name: "Red", hex: "#ca2d34" }, { name: "Dark Green", hex: "#33482e" }, { name: "Mint", hex: "#bddacd" }, { name: "Lavender", hex: "#cabbdc" }, { name: "Sage", hex: "#8fad81" }, { name: "Orange", hex: "#f69f00" }, { name: "Burgundy", hex: "#71103b" }, { name: "Blue", hex: "#0161fe" }, { name: "White", hex: "#ffffff" }, ] export default function Step2({ config, onUpdate, onPrevious }: Step2Props) { return (

{/* Progress indicator */}

Step 2

Color

{/* Elastic color selection */}

Elastic

{colorOptions.map((color) => ( ))}

{/* Notebook preview */}

{/* Cover color selection */}

Cover

{colorOptions.map((color) => ( ))}

{/* Previous step button */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { NotebookConfigurator } from "@/components/notebook-configurator" import { MobileNotebookConfigurator } from "@/components/mobile/notebook-configurator" export default function Home() { const router = useRouter() const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkDevice = () => { const isPortrait = window.innerHeight > window.innerWidth const isMobileDevice = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) return isPortrait && isMobileDevice } const handleResize = () => { setIsMobile(checkDevice()) } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) if (isMobile) { return } return } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/step-1.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ArrowRight } from "lucide-react" import { motion } from "framer-motion" import type { NotebookConfig } from "./notebook-configurator" import { ThreeDNotebook } from "./3d-notebook" import { StepWrapper } from "./step-wrapper" interface Step1Props { config: NotebookConfig onUpdate: (config: NotebookConfig) => void onNext: () => void } const sizeOptions = [ { name: "Landscape", width: 480, height: 300 }, { name: "Square", width: 360, height: 360 }, { name: "Portrait", width: 300, height: 480 }, ] const typeOptions = [ { name: "Lined", preview: `repeating-linear-gradient( transparent, transparent 24px, #e5e5e5 24px, #e5e5e5 25px )`, }, { name: "Dotted", preview: `radial-gradient( circle at center, #e5e5e5 1px, transparent 1px )`, }, { name: "Blank", preview: "none" }, ] export function Step1({ config, onUpdate, onNext }: Step1Props) { const [focusedSize, setFocusedSize] = useState(0) const [focusedType, setFocusedType] = useState(0) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Prevent handling if an input is focused if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA") { return } switch (e.key) { case "ArrowUp": case "ArrowDown": // Toggle between size and type sections const sizeButtons = document.querySelectorAll('[data-type="size"]') const typeButtons = document.querySelectorAll('[data-type="type"]') if (document.activeElement?.getAttribute("data-type") === "size") { ;(typeButtons[focusedType] as HTMLElement)?.focus() } else { ;(sizeButtons[focusedSize] as HTMLElement)?.focus() } break case "ArrowLeft": if (document.activeElement?.getAttribute("data-type") === "size") { setFocusedSize((prev) => { const newIndex = Math.max(prev - 1, 0) ;(document.querySelectorAll('[data-type="size"]')[newIndex] as HTMLElement)?.focus() return newIndex }) } else if (document.activeElement?.getAttribute("data-type") === "type") { setFocusedType((prev) => { const newIndex = Math.max(prev - 1, 0) ;(document.querySelectorAll('[data-type="type"]')[newIndex] as HTMLElement)?.focus() return newIndex }) } break case "ArrowRight": if (document.activeElement?.getAttribute("data-type") === "size") { setFocusedSize((prev) => { const newIndex = Math.min(prev + 1, sizeOptions.length - 1) ;(document.querySelectorAll('[data-type="size"]')[newIndex] as HTMLElement)?.focus() return newIndex }) } else if (document.activeElement?.getAttribute("data-type") === "type") { setFocusedType((prev) => { const newIndex = Math.min(prev + 1, typeOptions.length - 1) ;(document.querySelectorAll('[data-type="type"]')[newIndex] as HTMLElement)?.focus() return newIndex }) } break case "Enter": case " ": if (document.activeElement?.getAttribute("data-type") === "size") { onUpdate({ ...config, size: sizeOptions[focusedSize] }) } else if (document.activeElement?.getAttribute("data-type") === "type") { onUpdate({ ...config, type: typeOptions[focusedType] }) } e.preventDefault() break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [config, focusedSize, focusedType, onUpdate]) // Auto-focus first size option on mount useEffect(() => { const firstSizeButton = document.querySelector('[data-type="size"]') as HTMLElement firstSizeButton?.focus() }, []) return (

Step 1

Size

{sizeOptions.map((size, index) => ( { onUpdate({ ...config, size: size }) setFocusedSize(index) }} onFocus={() => setFocusedSize(index)} > {size.name} ))}

Type

{typeOptions.map((type, index) => ( { onUpdate({ ...config, type: type }) setFocusedType(index) }} onFocus={() => setFocusedType(index)} >

{type.name} ))}

Next Step

) } [V0_FILE]typescriptreact:file="components/step-2.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ArrowLeft, ArrowRight } from "lucide-react" import { motion } from "framer-motion" import type { NotebookConfig } from "./notebook-configurator" import { ThreeDNotebook } from "./3d-notebook" import { StepWrapper } from "./step-wrapper" interface Step2Props { config: NotebookConfig onUpdate: (config: NotebookConfig) => void onPrevious: () => void onNext: () => void } const colorOptions = [ { name: "Navy", hex: "#014689" }, { name: "Tan", hex: "#c5a07a" }, { name: "Red", hex: "#ca2d34" }, { name: "Dark Green", hex: "#33482e" }, { name: "Mint", hex: "#bddacd" }, { name: "Lavender", hex: "#cabbdc" }, { name: "Sage", hex: "#8fad81" }, { name: "Orange", hex: "#f69f00" }, { name: "Burgundy", hex: "#71103b" }, { name: "Blue", hex: "#0161fe" }, { name: "White", hex: "#ffffff" }, ] export function Step2({ config, onUpdate, onPrevious, onNext }: Step2Props) { const [focusedElastic, setFocusedElastic] = useState(0) const [focusedCover, setFocusedCover] = useState(0) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Prevent handling if an input is focused if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA") { return } switch (e.key) { case "ArrowUp": if (document.activeElement?.getAttribute("data-type")?.startsWith("elastic")) { const newIndex = Math.max(focusedElastic - 3, 0) setFocusedElastic(newIndex) ;(document.querySelector(`[data-type="elastic-${newIndex}"]`) as HTMLElement)?.focus() } else if (document.activeElement?.getAttribute("data-type")?.startsWith("cover")) { const newIndex = Math.max(focusedCover - 3, 0) setFocusedCover(newIndex) ;(document.querySelector(`[data-type="cover-${newIndex}"]`) as HTMLElement)?.focus() } break case "ArrowDown": if (document.activeElement?.getAttribute("data-type")?.startsWith("elastic")) { const newIndex = Math.min(focusedElastic + 3, colorOptions.length - 1) setFocusedElastic(newIndex) ;(document.querySelector(`[data-type="elastic-${newIndex}"]`) as HTMLElement)?.focus() } else if (document.activeElement?.getAttribute("data-type")?.startsWith("cover")) { const newIndex = Math.min(focusedCover + 3, colorOptions.length - 1) setFocusedCover(newIndex) ;(document.querySelector(`[data-type="cover-${newIndex}"]`) as HTMLElement)?.focus() } break case "ArrowLeft": if (document.activeElement?.getAttribute("data-type")?.startsWith("elastic")) { const newIndex = Math.max(focusedElastic - 1, 0) setFocusedElastic(newIndex) ;(document.querySelector(`[data-type="elastic-${newIndex}"]`) as HTMLElement)?.focus() } else if (document.activeElement?.getAttribute("data-type")?.startsWith("cover")) { const newIndex = Math.max(focusedCover - 1, 0) setFocusedCover(newIndex) ;(document.querySelector(`[data-type="cover-${newIndex}"]`) as HTMLElement)?.focus() } break case "ArrowRight": if (document.activeElement?.getAttribute("data-type")?.startsWith("elastic")) { const newIndex = Math.min(focusedElastic + 1, colorOptions.length - 1) setFocusedElastic(newIndex) ;(document.querySelector(`[data-type="elastic-${newIndex}"]`) as HTMLElement)?.focus() } else if (document.activeElement?.getAttribute("data-type")?.startsWith("cover")) { const newIndex = Math.min(focusedCover + 1, colorOptions.length - 1) setFocusedCover(newIndex) ;(document.querySelector(`[data-type="cover-${newIndex}"]`) as HTMLElement)?.focus() } break case "Tab": // Handle tab to switch between elastic and cover sections if (!e.shiftKey && document.activeElement?.getAttribute("data-type")?.startsWith("elastic")) { e.preventDefault() ;(document.querySelector('[data-type="cover-0"]') as HTMLElement)?.focus() } else if (e.shiftKey && document.activeElement?.getAttribute("data-type")?.startsWith("cover")) { e.preventDefault() ;(document.querySelector('[data-type="elastic-0"]') as HTMLElement)?.focus() } break case "Enter": case " ": const type = document.activeElement?.getAttribute("data-type") if (type?.startsWith("elastic")) { onUpdate({ ...config, elasticColor: colorOptions[focusedElastic].hex }) } else if (type?.startsWith("cover")) { onUpdate({ ...config, coverColor: colorOptions[focusedCover].hex }) } e.preventDefault() break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [config, focusedElastic, focusedCover, onUpdate]) // Auto-focus first elastic color option on mount useEffect(() => { const firstElasticButton = document.querySelector('[data-type="elastic-0"]') as HTMLElement firstElasticButton?.focus() }, []) return (

Step 2

Color

Elastic

{colorOptions.map((color, index) => ( onUpdate({ ...config, elasticColor: color.hex })} > {color.name} ))}

Cover

{colorOptions.map((color, index) => ( onUpdate({ ...config, coverColor: color.hex })} > {color.name} ))}

Previous Step

Next Step

) } [V0_FILE]typescriptreact:file="components/notebook-configurator.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Maximize2, Minimize2 } from "lucide-react" import { Step1 } from "./step-1" import { Step2 } from "./step-2" import { Step3 } from "./step-3" import { motion, AnimatePresence } from "framer-motion" import { Step4 } from "./step-4" export interface NotebookConfig { size: { name: string width: number height: number } type: { name: string preview: string } coverColor: string elasticColor: string } export function NotebookConfigurator() { const [currentStep, setCurrentStep] = useState(1) const [isFullscreen, setIsFullscreen] = useState(false) const [config, setConfig] = useState({ size: { name: "Portrait", width: 300, height: 480 }, type: { name: "Lined", preview: `repeating-linear-gradient( transparent, transparent 24px, #e5e5e5 24px, #e5e5e5 25px )`, }, coverColor: "#bddacd", elasticColor: "#000000", }) const [showBanner, setShowBanner] = useState(true) const [isComplete, setIsComplete] = useState(false) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Only handle left/right arrows when no input is focused if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA") { return } switch (e.key) { case "ArrowLeft": if (currentStep > 1) { setCurrentStep(currentStep - 1) } break case "ArrowRight": if (currentStep < 3) { setCurrentStep(currentStep + 1) } break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [currentStep]) useEffect(() => { if (isFullscreen) { setShowBanner(true) const timer = setTimeout(() => setShowBanner(false), 2000) return () => clearTimeout(timer) } else { setShowBanner(false) } }, [isFullscreen]) const toggleFullscreen = () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen() setIsFullscreen(true) } else { document.exitFullscreen() setIsFullscreen(false) } } return (

{isFullscreen ? "To exit full screen, press esc" : ""} {currentStep === 1 && ( setCurrentStep(2)} /> )} {currentStep === 2 && ( setCurrentStep(1)} onNext={() => setCurrentStep(3)} /> )} {currentStep === 3 && ( setCurrentStep(2)} onNext={() => setCurrentStep(4)} /> )} {currentStep === 4 && ( setCurrentStep(3)} onComplete={() => setIsComplete(true)} /> )} {isComplete && (

Thank you!

Your notebook configuration has been saved.

)}

) } [V0_FILE]typescriptreact:file="components/notebook-preview.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import type { NotebookConfig } from "./notebook-configurator" interface NotebookPreviewProps { config: NotebookConfig showPreview: boolean showPersonalization?: boolean personalization?: { name?: string address?: string reward?: string } } export function NotebookPreview({ config, showPreview, showPersonalization, personalization }: NotebookPreviewProps) { return ( {/* Paper texture */}

{/* Paper lines/dots (only show on hover) */} {/* Personalization overlay */} {showPersonalization && (

In case of loss, please return to:

{personalization?.name &&

{personalization.name}

} {personalization?.address && (

{personalization.address}

)}

{personalization?.reward && (

As a reward: $

{personalization.reward}

)}

)} {/* Spine detail */}

{/* Elastic band */} {/* Bookmark */}

) } [V0_FILE]typescriptreact:file="components/step-wrapper.tsx" isMerged="true" isEdit="true" "use client" import { motion, AnimatePresence } from "framer-motion" import type { ReactNode } from "react" interface StepWrapperProps { children: ReactNode isVisible: boolean } export function StepWrapper({ children, isVisible }: StepWrapperProps) { return ( {isVisible && ( {children} )} ) } [V0_FILE]typescriptreact:file="components/mobile/notebook-configurator.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Step1 } from "./step-1" import { Step2 } from "./step-2" import { Step3 } from "./step-3" import { Step4 } from "./step-4" import { NotebookPreview } from "./notebook-preview" import { StepIndicator } from "./step-indicator" export interface NotebookConfig { size: { name: string width: number height: number } type: { name: string preview: string } coverColor: string elasticColor: string } export function MobileNotebookConfigurator() { const [currentStep, setCurrentStep] = useState(1) const [config, setConfig] = useState({ size: { name: "Portrait", width: 300, height: 480 }, type: { name: "Lined", preview: `repeating-linear-gradient( transparent, transparent 24px, #e5e5e5 24px, #e5e5e5 25px )`, }, coverColor: "#bddacd", elasticColor: "#000000", }) const [isComplete, setIsComplete] = useState(false) const handleSwipe = (direction: number) => { if (direction > 0 && currentStep > 1) { setCurrentStep(currentStep - 1) } else if (direction < 0 && currentStep < 4) { setCurrentStep(currentStep + 1) } } return (

{/* Top area with preview */}

{/* Step indicator */} {/* Bottom sheet with controls */}

{currentStep === 1 && ( setCurrentStep(2)} onSwipe={handleSwipe} /> )} {currentStep === 2 && ( setCurrentStep(1)} onNext={() => setCurrentStep(3)} onSwipe={handleSwipe} /> )} {currentStep === 3 && ( setCurrentStep(2)} onNext={() => setCurrentStep(4)} onSwipe={handleSwipe} /> )} {currentStep === 4 && ( setCurrentStep(3)} onComplete={() => setIsComplete(true)} onSwipe={handleSwipe} /> )}

{isComplete && (

Thank you!

Your notebook configuration has been saved.

)}

) } [V0_FILE]typescriptreact:file="components/mobile/notebook-preview.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { NotebookConfig } from "./notebook-configurator" interface NotebookPreviewProps { config: NotebookConfig scale?: number showPersonalization?: boolean personalization?: { name?: string address?: string reward?: string } } export function NotebookPreview({ config, scale = 1, showPersonalization, personalization }: NotebookPreviewProps) { return ( {/* Paper texture */}

{/* Paper lines/dots */} {/* Personalization overlay */} {showPersonalization && (

In case of loss, please return to:

{personalization?.name &&

{personalization.name}

} {personalization?.address && (

{personalization.address}

)}

{personalization?.reward && (

As a reward: $

{personalization.reward}

)}

)} {/* Spine detail */}

{/* Elastic band */} {/* Bookmark */}

) } [V0_FILE]typescriptreact:file="components/mobile/step-indicator.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" interface StepIndicatorProps { currentStep: number totalSteps: number } export function StepIndicator({ currentStep, totalSteps }: StepIndicatorProps) { return (

{Array.from({ length: totalSteps }).map((_, i) => ( {i < totalSteps - 1 && (

)} ))}

) } [V0_FILE]typescriptreact:file="components/mobile/step-1.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ChevronRight } from "lucide-react" import type { NotebookConfig } from "./notebook-configurator" import { useSwipeable } from "react-swipeable" interface Step1Props { config: NotebookConfig onUpdate: (config: NotebookConfig) => void onNext: () => void onSwipe: (direction: number) => void } const sizeOptions = [ { name: "Landscape", width: 480, height: 300 }, { name: "Square", width: 360, height: 360 }, { name: "Portrait", width: 300, height: 480 }, ] const typeOptions = [ { name: "Lined", preview: `repeating-linear-gradient( transparent, transparent 24px, #e5e5e5 24px, #e5e5e5 25px )`, }, { name: "Dotted", preview: `radial-gradient( circle at center, #e5e5e5 1px, transparent 1px )`, }, { name: "Blank", preview: "none" }, ] export function Step1({ config, onUpdate, onNext, onSwipe }: Step1Props) { const handlers = useSwipeable({ onSwipedLeft: () => onSwipe(-1), onSwipedRight: () => onSwipe(1), preventDefaultTouchmoveEvent: true, trackMouse: true, }) return (

Size & Type

Size

{sizeOptions.map((size) => ( onUpdate({ ...config, size: size })} > {size.name} ))}

Type

{typeOptions.map((type) => ( onUpdate({ ...config, type: type })} >

{type.name} ))}

) } [V0_FILE]typescriptreact:file="components/mobile/step-2.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ChevronLeft, ChevronRight } from "lucide-react" import type { NotebookConfig } from "./notebook-configurator" import { useSwipeable } from "react-swipeable" interface Step2Props { config: NotebookConfig onUpdate: (config: NotebookConfig) => void onPrevious: () => void onNext: () => void onSwipe: (direction: number) => void } const colorOptions = [ { name: "Navy", hex: "#014689" }, { name: "Tan", hex: "#c5a07a" }, { name: "Red", hex: "#ca2d34" }, { name: "Dark Green", hex: "#33482e" }, { name: "Mint", hex: "#bddacd" }, { name: "Lavender", hex: "#cabbdc" }, { name: "Sage", hex: "#8fad81" }, { name: "Orange", hex: "#f69f00" }, { name: "Burgundy", hex: "#71103b" }, { name: "Blue", hex: "#0161fe" }, { name: "White", hex: "#ffffff" }, ] export function Step2({ config, onUpdate, onPrevious, onNext, onSwipe }: Step2Props) { const handlers = useSwipeable({ onSwipedLeft: () => onSwipe(-1), onSwipedRight: () => onSwipe(1), preventDefaultTouchmoveEvent: true, trackMouse: true, }) return (

Colors

Cover

{colorOptions.map((color) => ( onUpdate({ ...config, coverColor: color.hex })} > {color.name} ))}

Elastic

{colorOptions.map((color) => ( onUpdate({ ...config, elasticColor: color.hex })} > {color.name} ))}

Back Next

) } [V0_FILE]typescriptreact:file="components/mobile/step-3.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { ChevronLeft, Check } from "lucide-react" import type { NotebookConfig } from "./notebook-configurator" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { useSwipeable } from "react-swipeable" interface Step3Props { config: NotebookConfig onPrevious: () => void onComplete: () => void onSwipe: (direction: number) => void } export function Step3({ config, onPrevious, onComplete, onSwipe }: Step3Props) { const handlers = useSwipeable({ onSwipedLeft: () => onSwipe(-1), onSwipedRight: () => onSwipe(1), preventDefaultTouchmoveEvent: true, trackMouse: true, }) return (

Personalize

Name

Address

</div>
        <div className="space-y-2">
          <Label htmlFor="reward">Reward Amount</Label>
          <Input id="reward" placeholder="Enter reward amount" className="font-mono" />
        </div>
      </div>

<div className="mt-8 flex gap-4">
        <motion.button
          whileTap={{ scale: 0.95 }}
          onClick={onPrevious}
          className="flex w-full items-center justify-center gap-2 border-2 border-black text-black rounded-full py-4 font-mono focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
        >
          <ChevronLeft className="w-4 h-4" />
          Back
        </motion.button>
        <motion.button
          whileTap={{ scale: 0.95 }}
          onClick={onComplete}
          className="flex w-full items-center justify-center gap-2 bg-black text-white rounded-full py-4 font-mono focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
        >
          Complete
          <Check className="w-4 h-4" />
        </motion.button>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="app/mobile/page.tsx" isMerged="true"
import { MobileNotebookConfigurator } from "@/components/mobile/notebook-configurator"

export default function MobilePage() {
  return <MobileNotebookConfigurator />
}

[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  /* Prevent bounce/rubber-band scroll on iOS */
  overscroll-behavior-y: none;
  /* Ensure full height on iOS */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

/* Prevent text size adjustment on iOS */
* {
  -webkit-text-size-adjust: none;
}

/* Handle notched displays */
@supports (padding: max(0px)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

[V0_FILE]typescriptreact:file="components/step-3.tsx" isEdit="true" isMerged="true"
"use client"
import { useState, useEffect } from "react"
import { ArrowLeft, ArrowRight } from "lucide-react"
import { motion } from "framer-motion"
import type { NotebookConfig } from "./notebook-configurator"
import { ThreeDNotebook } from "./3d-notebook"
import { StepWrapper } from "./step-wrapper"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

interface Step3Props {
  config: NotebookConfig
  onPrevious: () => void
  onNext: () => void
}

export function Step3({ config, onPrevious, onNext }: Step3Props) {
  const [personalization, setPersonalization] = useState({
    name: "",
    address: "",
    reward: "",
  })

useEffect(() => {
    // Auto-focus name input on mount
    const nameInput = document.getElementById("name") as HTMLInputElement
    nameInput?.focus()

const handleKeyDown = (e: KeyboardEvent) => {
      // Handle tab key to manage focus between form fields
      if (e.key === "Tab") {
        const inputs = ["name", "address", "reward"]
        const currentIndex = inputs.indexOf(document.activeElement?.id || "")

if (currentIndex !== -1) {
          if (!e.shiftKey && currentIndex === inputs.length - 1) {
            // Focus the "Previous" button when tabbing from the last input
            const prevButton = document.querySelector('[data-type="previous"]') as HTMLElement
            if (prevButton) {
              e.preventDefault()
              prevButton.focus()
            }
          } else if (e.shiftKey && currentIndex === 0) {
            // Focus the "Next" button when shift+tabbing from the first input
            const nextButton = document.querySelector('[data-type="next"]') as HTMLElement
            if (nextButton) {
              e.preventDefault()
              nextButton.focus()
            }
          }
        }
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [])

return (
    <StepWrapper isVisible={true}>
      <div className="flex items-center justify-center mb-16 relative w-full">
        <div className="h-2 w-2 rounded-full bg-black"></div>
        <div className="h-0.5 bg-black w-16"></div>
        <div className="h-2 w-2 rounded-full bg-black -ml-[1px]"></div>
        <div className="h-0.5 bg-black w-16"></div>
        <div className="h-2 w-2 rounded-full bg-black -ml-[1px]"></div>
        <span className="ml-4 font-mono text-lg">Step 3</span>
        <div className="h-2 w-2 rounded-full bg-black ml-16"></div>
        <div className="h-0.5 bg-black w-16"></div>
        <div className="h-2 w-2 rounded-full bg-black -ml-[1px]"></div>
      </div>

<motion.h1
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-4xl font-mono text-center mb-16"
      >
        Personalize
      </motion.h1>

<div className="w-[1000px] mx-auto flex justify-between items-center">
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="w-[400px]">
          <div className="space-y-6">
            <div className="space-y-2">
              <Label htmlFor="name" className="text-sm font-mono">
                Name
              </Label>
              <Input
                id="name"
                value={personalization.name}
                onChange={(e) => setPersonalization((prev) => ({ ...prev, name: e.target.value }))}
                placeholder="Enter your name"
                className="font-mono bg-white border-gray-200"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="address" className="text-sm font-mono">
                Address
              </Label>
              <Textarea
                id="address"
                value={personalization.address}
                onChange={(e) => setPersonalization((prev) => ({ ...prev, address: e.target.value }))}
                placeholder="Enter your address"
                className="font-mono resize-none bg-white border-gray-200"
                rows={3}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="reward" className="text-sm font-mono">
                Reward Amount
              </Label>
              <Input
                id="reward"
                value={personalization.reward}
                onChange={(e) => setPersonalization((prev) => ({ ...prev, reward: e.target.value }))}
                placeholder="Enter reward amount"
                className="font-mono bg-white border-gray-200"
              />
            </div>
          </div>
        </motion.div>

<div className="w-[1000px] mx-auto mt-12 flex justify-between">
        <motion.button
          data-type="previous"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="flex items-center justify-center gap-2 px-6 py-3 bg-white text-black border border-gray-200 rounded-lg font-mono hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 transition-colors"
          onClick={onPrevious}
        >
          <ArrowLeft className="w-4 h-4" />
          Previous Step
        </motion.button>

<motion.button
          data-type="next"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="flex items-center justify-center gap-2 px-6 py-3 bg-black text-white rounded-lg font-mono hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 transition-colors"
          onClick={onNext}
        >
          Next Step
          <ArrowRight className="w-4 h-4" />
        </motion.button>
      </div>
    </StepWrapper>
  )
}

[V0_FILE]typescriptreact:file="components/step-4.tsx" isEdit="true" isMerged="true"
"use client"
import { ArrowLeft, Check } from "lucide-react"
import { motion } from "framer-motion"
import type { NotebookConfig } from "./notebook-configurator"
import { ThreeDNotebook } from "./3d-notebook"
import { StepWrapper } from "./step-wrapper"

interface Step4Props {
  config: NotebookConfig
  onPrevious: () => void
  onComplete: () => void
}

export function Step4({ config, onPrevious, onComplete }: Step4Props) {
  return (
    <StepWrapper isVisible={true}>
      <div className="flex items-center justify-center mb-8 md:mb-16 relative w-full px-4">
        <div className="h-2 w-2 rounded-full bg-black"></div>
        <div className="h-0.5 bg-black w-8 md:w-16"></div>
        <div className="h-2 w-2 rounded-full bg-black -ml-[1px]"></div>
        <div className="h-0.5 bg-black w-8 md:w-16"></div>
        <div className="h-2 w-2 rounded-full bg-black -ml-[1px]"></div>
        <div className="h-0.5 bg-black w-8 md:w-16"></div>
        <div className="h-2 w-2 rounded-full bg-black -ml-[1px]"></div>
        <span className="ml-4 font-mono text-lg">Step 4</span>
      </div>

<motion.h1
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-3xl md:text-4xl font-mono text-center mb-8 md:mb-16 px-4"
      >
        Review
      </motion.h1>

<div className="w-full max-w-[1000px] mx-auto flex flex-col md:flex-row justify-between items-center px-4 gap-8">
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="w-full md:w-[400px] order-2 md:order-1"
        >
          <div className="space-y-6 md:space-y-8">
            <div>
              <h2 className="font-mono text-lg md:text-xl mb-2">Size</h2>
              <p className="text-base md:text-lg">{config.size.name}</p>
            </div>
            <div>
              <h2 className="font-mono text-lg md:text-xl mb-2">Type</h2>
              <p className="text-base md:text-lg">{config.type.name}</p>
            </div>
            <div>
              <h2 className="font-mono text-lg md:text-xl mb-2">Cover Color</h2>
              <div className="flex items-center gap-3">
                <div
                  className="w-6 h-6 rounded-full border border-gray-200"
                  style={{ backgroundColor: config.coverColor }}
                />
                <p className="text-base md:text-lg">Selected</p>
              </div>
            </div>
            <div>
              <h2 className="font-mono text-lg md:text-xl mb-2">Elastic Color</h2>
              <div className="flex items-center gap-3">
                <div
                  className="w-6 h-6 rounded-full border border-gray-200"
                  style={{ backgroundColor: config.elasticColor }}
                />
                <p className="text-base md:text-lg">Selected</p>
              </div>
            </div>
          </div>
        </motion.div>

<div className="w-full max-w-[1000px] mx-auto mt-8 md:mt-12 flex justify-between px-4 gap-4">
        <motion.button
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-3 bg-white text-black border border-gray-200 rounded-lg font-mono hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 transition-colors"
          onClick={onPrevious}
        >
          <ArrowLeft className="w-4 h-4" />
          <span className="hidden md:inline">Previous Step</span>
          <span className="md:hidden">Back</span>
        </motion.button>

<motion.button
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          className="flex-1 md:flex-none flex items-center justify-center gap-2 px-6 py-3 bg-black text-white rounded-lg font-mono hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 transition-colors"
          onClick={onComplete}
        >
          <span>Complete</span>
          <Check className="w-4 h-4" />
        </motion.button>
      </div>
    </StepWrapper>
  )
}

[V0_FILE]typescriptreact:file="components/mobile/step-4.tsx" isMerged="true"
"use client"
import { ArrowLeft, Check } from "lucide-react"
import { motion } from "framer-motion"
import type { NotebookConfig } from "./notebook-configurator"
import { useSwipeable } from "react-swipeable"

interface Step4Props {
  config: NotebookConfig
  onPrevious: () => void
  onComplete: () => void
  onSwipe: (direction: number) => void
}

export function Step4({ config, onPrevious, onComplete, onSwipe }: Step4Props) {
  const handlers = useSwipeable({
    onSwipedLeft: () => onSwipe(-1),
    onSwipedRight: () => onSwipe(1),
    preventDefaultTouchmoveEvent: true,
    trackMouse: true,
  })

return (
    <motion.div
      {...handlers}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      className="h-full p-6 overflow-auto"
    >
      <h1 className="text-2xl font-mono mb-8">Review</h1>

<div className="space-y-6">
        <div>
          <h2 className="font-mono text-sm text-gray-500">Size</h2>
          <p className="mt-1 text-lg">{config.size.name}</p>
        </div>
        <div>
          <h2 className="font-mono text-sm text-gray-500">Type</h2>
          <p className="mt-1 text-lg">{config.type.name}</p>
        </div>
        <div>
          <h2 className="font-mono text-sm text-gray-500">Cover Color</h2>
          <div className="flex items-center gap-3 mt-1">
            <div
              className="w-6 h-6 rounded-full border border-gray-200"
              style={{ backgroundColor: config.coverColor }}
            />
            <p className="text-lg">Selected</p>
          </div>
        </div>
        <div>
          <h2 className="font-mono text-sm text-gray-500">Elastic Color</h2>
          <div className="flex items-center gap-3 mt-1">
            <div
              className="w-6 h-6 rounded-full border border-gray-200"
              style={{ backgroundColor: config.elasticColor }}
            />
            <p className="text-lg">Selected</p>
          </div>
        </div>
      </div>

<div className="mt-8 flex gap-4">
        <motion.button
          whileTap={{ scale: 0.95 }}
          onClick={onPrevious}
          className="flex w-full items-center justify-center gap-2 border-2 border-black text-black rounded-full py-4 font-mono focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
        >
          <ArrowLeft className="w-4 h-4" />
          Back
        </motion.button>
        <motion.button
          whileTap={{ scale: 0.95 }}
          onClick={onComplete}
          className="flex w-full items-center justify-center gap-2 bg-black text-white rounded-full py-4 font-mono focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
        >
          Complete
          <Check className="w-4 h-4" />
        </motion.button>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/3d-notebook.tsx" isEdit="true" isQuickEdit="true"
"use client"
import { useRef, useEffect } from "react"
import type { NotebookConfig } from "./notebook-configurator"

interface ThreeDNotebookProps {
  config: NotebookConfig
  personalization?: {
    name?: string
    address?: string
    reward?: string
  }
  onNavigate?: (page: number) => void
  className?: string
  autoOpenToForm?: boolean
  autoClose?: boolean
  size?: {
    name: string
  }
}

export function ThreeDNotebook({
  config,
  personalization,
  onNavigate,
  className = "",
  autoOpenToForm = false,
  autoClose = false,
  size,
}: ThreeDNotebookProps) {
  const bookRef = useRef<HTMLDivElement>(null)

const pages = [
    {
      front: {
        isCover: true,
        content: (
          <div className="moleskine-cover" style={{ background: config.coverColor }}>
            <div className="elastic-band" style={{ background: config.elasticColor }} />
          </div>
        ),
      },
      back: {
        content: (
          <div className="first-page">
            <p className="moleskine-text">In case of loss, please return to:</p>
            <div className="form-lines">
              <div className="form-line name-line">
                {personalization?.name && <span className="form-content">{personalization.name}</span>}
              </div>
              <div className="form-line address-line">
                {personalization?.address && (
                  <span className="form-content whitespace-pre-line">{personalization.address}</span>
                )}
              </div>
            </div>
            <p className="moleskine-text mt-8">As a reward: $</p>
            <div className="form-line reward-line">
              {personalization?.reward && <span className="form-content">{personalization.reward}</span>}
            </div>
            <div className="moleskine-logo">
              <div className="logo-grid">
                {[...Array(9)].map((_, i) => (
                  <div key={i} className="logo-square" />
                ))}
              </div>
            </div>
          </div>
        ),
      },
    },
    {
      front: {
        content: (
          <div
            className="page-content"
            style={{
              backgroundImage: config.type.preview,
              backgroundSize: config.type.name === "Dotted" ? "20px 20px" : "auto",
            }}
          />
        ),
      },
      back: {
        content: (
          <div
            className="page-content"
            style={{
              backgroundImage: config.type.preview,
              backgroundSize: config.type.name === "Dotted" ? "20px 20px" : "auto",
            }}
          />
        ),
      },
    },
    {
      front: {
        isCover: true,
        content: (
          <div className="moleskine-cover back-cover" style={{ background: config.coverColor }}>
            <div className="elastic-band" style={{ background: config.elasticColor }} />
          </div>
        ),
      },
      back: { content: null },
    },
  ]

useEffect(() => {
    const elBook = bookRef.current
    if (!elBook) return

if (autoOpenToForm) {
      // Delay the animation slightly to ensure it runs after mount
      setTimeout(() => {
        elBook.style.setProperty("--c", "1")
      }, 100)
    } else if (autoClose) {
      elBook.style.setProperty("--c", "0")
    }

const pages = elBook.querySelectorAll(".page")
    pages.forEach((page, idx) => {
      page.setAttribute("style", `--i: ${idx}`)
      page.addEventListener("click", (evt) => {
        const target = evt.target as HTMLElement
        if (target.closest("a")) return
        const curr = target.closest(".back") ? idx : idx + 1
        elBook.style.setProperty("--c", curr.toString())
        onNavigate?.(curr)
      })
    })

const handleKeyDown = (e: KeyboardEvent) => {
      // Only handle keys if the book element is focused
      if (!elBook.contains(document.activeElement)) return

const currentPage = Number(elBook.style.getPropertyValue("--c")) || 0
      if (e.key === "ArrowLeft" && currentPage > 0) {
        elBook.style.setProperty("--c", (currentPage - 1).toString())
        onNavigate?.(currentPage - 1)
      } else if (e.key === "ArrowRight" && currentPage < pages.length) {
        elBook.style.setProperty("--c", (currentPage + 1).toString())
        onNavigate?.(currentPage + 1)
      }
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [onNavigate, autoOpenToForm, autoClose])

return (
    <div className={`book-wrapper ${className}`} tabIndex={0}>
      <div className="book" ref={bookRef}>
        {pages.map((page, idx) => (
          <div key={idx} className="page">
            <div className={`front ${page.front.isCover ? "cover" : ""}`}>{page.front.content}</div>
            <div className={`back ${page.back.isCover ? "cover" : ""}`}>{page.back.content}</div>
          </div>
        ))}
      </div>
      <style jsx global>{`
        .book-wrapper {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          perspective: 2000px;
        }

.book {
          position: relative;
          display: flex;
          width: 25cqmin; /* Base size */
          pointer-events: none;
          transform-style: preserve-3d;
          transition: translate 1s, width 0.3s ease-out;
          translate: calc(min(var(--c), 1) * 50%) 0%;
          scale: ${size?.name === "Landscape" ? 0.9 : size?.name === "Square" ? 0.95 : 1};
        }

.page {
          --thickness: 4;
          flex: none;
          display: flex;
          width: 100%;
          font-size: 2cqmin;
          pointer-events: all;
          user-select: none;
          transform-style: preserve-3d;
          transform-origin: left center;
          transition: transform 1s,
            rotate 1s ease-in
              calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
          translate: calc(var(--i) * -100%) 0px 0px;
          transform: translateZ(
            calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 0.23cqmin))
          );
          rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
        }

.front,
        .back {
          position: relative;
          flex: none;
          width: 100%;
          backface-visibility: hidden;
          overflow: hidden;
          background-color: #f5f5eb;
          translate: 0px;
        }

.back {
          translate: -100% 0;
          rotate: 0 1 0 180deg;
        }

.page {
          box-shadow: 0 0.2em 0.5em -0.1em #00000040;
        }

.front,
        .back {
          display: flex;
          flex-flow: column wrap;
          justify-content: space-between;
          border: 1px solid #0002;
          border-radius: 3px;
          aspect-ratio: 1/1.4142; /* A5 proportion */
        }

.cover {
          color: #fff;
        }

.moleskine-cover {
          position: relative;
          width: 100%;
          height: 100%;
        }

.elastic-band {
          position: absolute;
          right: -0.5em;
          top: 0;
          bottom: 0;
          width: 1em;
          border-radius: 0.5em;
        }

.back-cover .elastic-band {
          left: -0.5em;
          right: auto;
        }

.first-page {
          padding: 2em;
          position: relative;
          height: 100%;
        }

.moleskine-text {
          font-size: 0.8em;
          color: #666;
          margin: 0;
          margin-bottom: 0.5em;
        }

.form-lines {
          display: flex;
          flex-direction: column;
          gap: 1.5em;
        }

.form-line {
          width: 100%;
          height: 1px;
          background: #ccc;
          position: relative;
        }

.form-content {
          position: absolute;
          left: 0;
          top: -1.2em;
          font-size: 0.8em;
          color: #333;
        }

.reward-line {
          margin-top: 0.5em;
        }

.moleskine-logo {
          position: absolute;
          bottom: 2em;
          left: 2em;
        }

.logo-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 2px;
          width: 1em;
          height: 1em;
        }

.logo-square {
          background: #333;
          width: 100%;
          height: 100%;
        }

.page-content {
          width: 100%;
          height: 100%;
          padding: 2em;
        }

.mt-8 {
          margin-top: 2em;
        }
      `}</style>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This