1// Sample.tsx
  2// A practical TSX + React + TypeScript example 🧩
  3
  4import React, { useEffect, useState } from "react";
  5
  6// --------------------
  7// Types & Interfaces
  8// --------------------
  9type Role = "USER" | "ADMIN";
 10
 11interface User {
 12    id: number;
 13    name: string;
 14    role: Role;
 15}
 16
 17// Props for a component
 18interface UserCardProps {
 19    user: User;
 20    onSelect: (id: number) => void;
 21}
 22
 23// --------------------
 24// Reusable Component
 25// --------------------
 26const UserCard: React.FC<UserCardProps> = ({ user, onSelect }) => {
 27    return (
 28        <div style={{ border: "1px solid #ccc", padding: 12, marginBottom: 8 }}>
 29            <h3>{user.name}</h3>
 30            <p>Role: {user.role}</p>
 31            <button onClick={() => onSelect(user.id)}>Select</button>
 32        </div>
 33    );
 34};
 35
 36// --------------------
 37// Main Component
 38// --------------------
 39const Sample: React.FC = () => {
 40    // Typed state
 41    const [users, setUsers] = useState<User[]>([]);
 42    const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
 43    const [loading, setLoading] = useState<boolean>(true);
 44
 45    // --------------------
 46    // Side Effects
 47    // --------------------
 48    useEffect(() => {
 49        // Fake async fetch
 50        const loadUsers = async () => {
 51            setLoading(true);
 52
 53            await new Promise(resolve => setTimeout(resolve, 500));
 54
 55            setUsers([
 56                { id: 1, name: "Alice", role: "USER" },
 57                { id: 2, name: "Bob", role: "ADMIN" },
 58            ]);
 59
 60            setLoading(false);
 61        };
 62
 63        loadUsers();
 64    }, []);
 65
 66    // --------------------
 67    // Event Handlers
 68    // --------------------
 69    const handleSelectUser = (id: number) => {
 70        setSelectedUserId(id);
 71    };
 72
 73    // --------------------
 74    // Derived Values
 75    // --------------------
 76    const selectedUser = users.find(u => u.id === selectedUserId);
 77
 78    // --------------------
 79    // Conditional Rendering
 80    // --------------------
 81    if (loading) {
 82        return <div>Loading users...</div>;
 83    }
 84
 85    return (
 86        <div style={{ maxWidth: 400, margin: "0 auto" }}>
 87            <h2>User List</h2>
 88
 89            {users.map(user => (
 90                <UserCard
 91                    key={user.id}
 92                    user={user}
 93                    onSelect={handleSelectUser}
 94                />
 95            ))}
 96
 97            {selectedUser && (
 98                <div style={{ marginTop: 16 }}>
 99                    <strong>Selected User:</strong>
100                    <div>{selectedUser.name}</div>
101                </div>
102            )}
103        </div>
104    );
105};
106
107export default Sample;