im going to give you some react screen code from a project im working on, i want you to go through the code and refactor following, dry, kiss and other code best practices. think about the folder structure for all the components, helper files/utils, etc. Really do your best and go out of the box if needed.

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { PlusCircle, LogIn } from "lucide-react"
import Link from 'next/link'

export default function Component() {
  const [username, setUsername] = useState("Player") // In a real app, this would come from authentication
  const [gameCode, setGameCode] = useState("")

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-lg">
        <CardHeader>
          <CardTitle className="text-3xl font-bold text-center">Welcome to GameHub</CardTitle>
          <CardDescription className="text-xl text-center">Hello, {username}!</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Link href="/create-game" passHref>
              <Button className="w-full h-20 text-lg" variant="default">
                <PlusCircle className="mr-2 h-6 w-6" />
                Create Game
              </Button>
            </Link>
            <Button className="w-full h-20 text-lg" variant="secondary" onClick={() => alert('Joining game...')}>
              <LogIn className="mr-2 h-6 w-6" />
              Join Game
            </Button>
          </div>
          <div className="space-y-2">
            <Input
              type="text"
              placeholder="Enter game code"
              value={gameCode}
              onChange={(e) => setGameCode(e.target.value)}
            />
            <Button className="w-full" variant="outline" onClick={() => alert(`Joining game with code: ${gameCode}`)}>
              Join with Code
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

import React, { useState } from 'react';
import { X, Check } from 'lucide-react';

export default function CreateGame() {
  const [gameName, setGameName] = useState('');
  const [numTeams, setNumTeams] = useState(2);
  const [numRounds, setNumRounds] = useState(5);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission
    console.log({ gameName, numTeams, numRounds });
  };

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
      <div className="bg-white rounded-lg shadow-xl p-8 w-full max-w-md">
        <h1 className="text-3xl font-bold mb-6 text-center text-gray-800">Create Game</h1>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="gameName" className="block text-sm font-medium text-gray-700 mb-1">
              Game Name
            </label>
            <input
              type="text"
              id="gameName"
              value={gameName}
              onChange={(e) => setGameName(e.target.value)}
              placeholder="Enter your game session name"
              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              required
            />
          </div>
          <div>
            <label htmlFor="numTeams" className="block text-sm font-medium text-gray-700 mb-1">
              Number of Teams
            </label>
            <select
              id="numTeams"
              value={numTeams}
              onChange={(e) => setNumTeams(Number(e.target.value))}
              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            >
              {[...Array(9)].map((_, i) => (
                <option key={i} value={i + 2}>
                  {i + 2}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Number of Rounds</label>
            <div className="flex justify-between">
              {[5, 10, 15].map((rounds) => (
                <button
                  key={rounds}
                  type="button"
                  onClick={() => setNumRounds(rounds)}
                  className={`px-4 py-2 rounded-full ${
                    numRounds === rounds
                      ? 'bg-blue-500 text-white'
                      : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
                  } transition-colors duration-200`}
                >
                  {rounds}
                </button>
              ))}
            </div>
          </div>
          <div className="flex justify-between pt-4">
            <button
              type="button"
              onClick={() => {/* Handle cancel action */}}
              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 flex items-center"
            >
              <X className="w-5 h-5 mr-2" />
              Cancel
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center"
            >
              <Check className="w-5 h-5 mr-2" />
              Create Game
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}