React Template Architecture

import * as React from "react"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/constants/ui-variants"
import type { ButtonProps } from "@/types/ui"

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild, children, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      >
        {children}
      </button>
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { fetchWeather } from '@/api/weather'

export default function WeatherPage() {
  const [city, setCity] = useState('')
  const [weather, setWeather] = useState(null)
  const [loading, setLoading] = useState(false)

  const handleSearch = async () => {
    setLoading(true)
    const data = await fetchWeather(city)
    setWeather(data)
    setLoading(false)
  }

  return (
    <div className="container mx-auto p-6">
      <Card>
        <CardHeader>
          <CardTitle>Weather Search</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-2">
            <Input 
              value={city} 
              onChange={(e) => setCity(e.target.value)}
              placeholder="Enter city name"
            />
            <Button onClick={handleSearch} disabled={loading}>
              Search
            </Button>
          </div>
          {weather && (
            <div className="mt-4">
              <h2>{weather.name}</h2>
              <p>{weather.main.temp}°C</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import HomePage from './pages/home'
import WeatherPage from './pages/weather'
import NotFoundPage from './pages/not-found'
import Layout from './components/layout'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="weather" element={<WeatherPage />} />
          <Route path="docs/*" element={<DocsRoutes />} />
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

import axios from 'axios'

const API_BASE_URL = import.meta.env.VITE_API_URL || 'https://api.example.com'

export const fetchWeather = async (city: string) => {
  const response = await axios.get(`${API_BASE_URL}/weather`, {
    params: { city }
  })
  return response.data
}