[V0_FILE]typescriptreact:file="app/components/Scoreboard.tsx" isMerged="true" "use client" import { useState } from "react" import TeamScore from "./TeamScore" import InningDetails from "./InningDetails" type Team = { name: string runs: number hits: number errors: number } export default function Scoreboard() { const [homeTeam, setHomeTeam] = useState({ name: "Home", runs: 0, hits: 0, errors: 0 }) const [awayTeam, setAwayTeam] = useState({ name: "Away", runs: 0, hits: 0, errors: 0 }) const [currentInning, setCurrentInning] = useState(1) const [isTopInning, setIsTopInning] = useState(true) const updateTeamScore = (team: "home" | "away", field: "runs" | "hits" | "errors", value: number) => { const setTeam = team === "home" ? setHomeTeam : setAwayTeam setTeam((prevTeam) => ({ ...prevTeam, [field]: prevTeam[field] + value })) } const advanceInning = () => { if (isTopInning) { setIsTopInning(false) } else { setIsTopInning(true) setCurrentInning((prev) => Math.min(prev + 1, 9)) } } return (

) } [V0_FILE]typescriptreact:file="app/components/TeamScore.tsx" isMerged="true" import { Button } from "@/components/ui/button" type Team = { name: string runs: number hits: number errors: number } type TeamScoreProps = { team: Team updateScore: (team: "home" | "away", field: "runs" | "hits" | "errors", value: number) => void isAway: boolean } export default function TeamScore({ team, updateScore, isAway }: TeamScoreProps) { const teamType = isAway ? "away" : "home" return (

{team.name}

Runs

{team.runs}

Hits

{team.hits}

Errors

{team.errors}

) } [V0_FILE]typescriptreact:file="app/components/InningDetails.tsx" isMerged="true" import { Button } from "@/components/ui/button" type InningDetailsProps = { currentInning: number isTopInning: boolean advanceInning: () => void } export default function InningDetails({ currentInning, isTopInning, advanceInning }: InningDetailsProps) { return (

Inning: {currentInning} {isTopInning ? "Top" : "Bottom"}

) } [V0_FILE]typescriptreact:file="app/components/LineupEntry.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { Player } from "./Scorebook" type LineupEntryProps = { team: "home" | "away" onSubmit: (lineup: Player[]) => void } export default function LineupEntry({ team, onSubmit }: LineupEntryProps) { const [lineup, setLineup] = useState(Array(9).fill({ name: "", position: "" })) const handleInputChange = (index: number, field: "name" | "position", value: string) => { const newLineup = [...lineup] newLineup[index] = { ...newLineup[index], [field]: value } setLineup(newLineup) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit(lineup) } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Scorebook from "./components/Scorebook" export default function Home() { return (

Baseball Scorebook

) } [V0_FILE]typescriptreact:file="app/components/Scorebook.tsx" isEdit="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import TeamScorecard from "./TeamScorecard" import LineupEntry from "./LineupEntry" export type Player = { name: string position: string } export type AtBat = { result: string details: string } export type PlayerStats = { player: Player atBats: (AtBat | null)[] } export default function Scorebook() { const [homeTeam, setHomeTeam] = useState([]) const [awayTeam, setAwayTeam] = useState([]) const [currentInning, setCurrentInning] = useState(1) const updateLineup = (team: "home" | "away", lineup: Player[]) => { const setTeam = team === "home" ? setHomeTeam : setAwayTeam setTeam(lineup.map((player) => ({ player, atBats: Array(9).fill(null) }))) } const updateAtBat = (team: "home" | "away", playerIndex: number, inning: number, result: string, details: string) => { const setTeam = team === "home" ? setHomeTeam : setAwayTeam setTeam((prevTeam) => { const newTeam = [...prevTeam] newTeam[playerIndex].atBats[inning - 1] = { result, details } return newTeam }) } return ( Away Team Home Team updateLineup("away", lineup)} /> updateAtBat("away", playerIndex, inning, result, details) } currentInning={currentInning} /> updateLineup("home", lineup)} /> updateAtBat("home", playerIndex, inning, result, details) } currentInning={currentInning} /> ) } [V0_FILE]typescriptreact:file="app/components/TeamScorecard.tsx" isEdit="true" import type { PlayerStats } from "./Scorebook" import PlayerRow from "./PlayerRow" type TeamScorecardProps = { team: PlayerStats[] updateAtBat: (playerIndex: number, inning: number, result: string, details: string) => void currentInning: number } export default function TeamScorecard({ team, updateAtBat, currentInning }: TeamScorecardProps) { return (

{Array.from({ length: 9 }, (_, i) => ( ))} {team.map((playerStats, index) => ( updateAtBat(index, inning, result, details)} currentInning={currentInning} /> ))}

Player	Pos	{i + 1}

) } [V0_FILE]typescriptreact:file="app/components/PlayerRow.tsx" isEdit="true" import type { PlayerStats } from "./Scorebook" import AtBatCell from "./AtBatCell" type PlayerRowProps = { playerStats: PlayerStats updateAtBat: (inning: number, result: string, details: string) => void currentInning: number } export default function PlayerRow({ playerStats, updateAtBat, currentInning }: PlayerRowProps) { return ( {playerStats.player.name} {playerStats.player.position} {Array.from({ length: 9 }, (_, i) => ( updateAtBat(i + 1, result, details)} isCurrentInning={i + 1 === currentInning} /> ))} ) } [V0_FILE]typescriptreact:file="app/components/AtBatCell.tsx" isEdit="true" import { useState } from "react" import type { AtBat } from "./Scorebook" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import PlayInput from "./PlayInput" type AtBatCellProps = { atBat: AtBat | null updateAtBat: (result: string, details: string) => void isCurrentInning: boolean } export default function AtBatCell({ atBat, updateAtBat, isCurrentInning }: AtBatCellProps) { const [isOpen, setIsOpen] = useState(false) const handlePlaySubmit = (result: string, details: string) => { updateAtBat(result, details) setIsOpen(false) } return ( ) } [V0_FILE]typescriptreact:file="app/components/PlayInput.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { AtBat } from "./Scorebook" type PlayInputProps = { onSubmit: (result: string, details: string) => void initialData: AtBat | null } export default function PlayInput({ onSubmit, initialData }: PlayInputProps) { const [result, setResult] = useState(initialData?.result || "") const [details, setDetails] = useState(initialData?.details || "") useEffect(() => { if (initialData) { setResult(initialData.result) setDetails(initialData.details) } }, [initialData]) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit(result, details) } return ( ) }

{team.name}

Inning: {currentInning} {isTopInning ? "Top" : "Bottom"}

{team === "home" ? "Home" : "Away"} Team Lineup

Baseball Scorebook

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This