Frontend với AI

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Thêm vào index.css:
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

Dùng Tailwind CSS (v3) viết component Notification Toast:
- 4 variants: success (green), error (red), warning (yellow), info (blue)
- Mỗi toast có: icon, title, message, close button
- Animation: slide in từ phải, tự đóng sau 5 giây
- Stack nhiều toasts theo chiều dọc, góc dưới phải màn hình
- React component, nhận prop: { type, title, message, onClose }

import { useEffect } from 'react';

const VARIANTS = {
  success: { bg: 'bg-green-50',  border: 'border-green-200', icon: '✅', title: 'text-green-800', msg: 'text-green-700' },
  error:   { bg: 'bg-red-50',    border: 'border-red-200',   icon: '❌', title: 'text-red-800',   msg: 'text-red-700'   },
  warning: { bg: 'bg-yellow-50', border: 'border-yellow-200',icon: '⚠️', title: 'text-yellow-800',msg: 'text-yellow-700'},
  info:    { bg: 'bg-blue-50',   border: 'border-blue-200',  icon: 'ℹ️', title: 'text-blue-800',  msg: 'text-blue-700'  },
};

export function Toast({ type = 'info', title, message, onClose }) {
  const v = VARIANTS[type];

  useEffect(() => {
    const timer = setTimeout(onClose, 5000);
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    

      {v.icon}
      

        
{title}
        {message && 
{message}
}
      
      
        ×
      
    
  );
}

// Container đặt ở góc phải dưới
export function ToastContainer({ toasts, removeToast }) {
  return (
    

      {toasts.map((toast) => (
         removeToast(toast.id)} />
      ))}
    
  );
}

# Tạo project mới với Vite (nhanh hơn Create React App 10x)
npm create vite@latest task-manager -- --template react
cd task-manager

# Cài dependencies mặc định
npm install

# Cài Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Cài thư viện bổ sung
npm install lucide-react uuid

# Chạy development server
npm run dev
# Mở trình duyệt tại: http://localhost:5173

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

mkdir src/components src/hooks
# Windows:
ni src/components/TaskForm.jsx, src/components/TaskItem.jsx, src/components/TaskList.jsx, src/components/FilterBar.jsx, src/hooks/useTasks.js
# macOS/Linux:
touch src/components/TaskForm.jsx src/components/TaskItem.jsx src/components/TaskList.jsx src/components/FilterBar.jsx src/hooks/useTasks.js

// Prompt Copilot: "Viết custom hook useTasks với localStorage persistence, hỗ trợ add/toggle/delete/edit"
import { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';

const STORAGE_KEY = 'task-manager-tasks';

export function useTasks() {
  const [tasks, setTasks] = useState(() => {
    try {
      const saved = localStorage.getItem(STORAGE_KEY);
      return saved ? JSON.parse(saved) : [];
    } catch {
      return [];
    }
  });

  // Tự động lưu localStorage mỗi khi tasks thay đổi
  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (title, priority = 'medium') => {
    if (!title.trim()) return;
    setTasks(prev => [...prev, {
      id: uuidv4(),
      title: title.trim(),
      priority,          // 'low' | 'medium' | 'high'
      completed: false,
      createdAt: new Date().toISOString(),
    }]);
  };

  const toggleTask = (id) => {
    setTasks(prev => prev.map(t =>
      t.id === id ? { ...t, completed: !t.completed } : t
    ));
  };

  const deleteTask = (id) => {
    setTasks(prev => prev.filter(t => t.id !== id));
  };

  const editTask = (id, newTitle) => {
    if (!newTitle.trim()) return;
    setTasks(prev => prev.map(t =>
      t.id === id ? { ...t, title: newTitle.trim() } : t
    ));
  };

  const clearCompleted = () => {
    setTasks(prev => prev.filter(t => !t.completed));
  };

  return { tasks, addTask, toggleTask, deleteTask, editTask, clearCompleted };
}

import { useState } from 'react';
import { Plus } from 'lucide-react';

const PRIORITY_OPTIONS = [
  { value: 'low', label: 'Thấp', color: 'text-green-400' },
  { value: 'medium', label: 'Trung bình', color: 'text-yellow-400' },
  { value: 'high', label: 'Cao', color: 'text-red-400' },
];

export function TaskForm({ onAdd }) {
  const [title, setTitle] = useState('');
  const [priority, setPriority] = useState('medium');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd(title, priority);
    setTitle('');
  };

  return (
    <form onSubmit={handleSubmit} className="flex gap-2 mb-6">
      <input
        type="text"
        value={title}
        onChange={e => setTitle(e.target.value)}
        placeholder="Thêm công việc mới..."
        className="flex-1 px-4 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-indigo-500"
      />
      <select
        value={priority}
        onChange={e => setPriority(e.target.value)}
        className="px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white focus:outline-none"
      >
        {PRIORITY_OPTIONS.map(opt => (
          <option key={opt.value} value={opt.value}>{opt.label}</option>
        ))}
      </select>
      <button
        type="submit"
        disabled={!title.trim()}
        className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-40 text-white rounded-lg flex items-center gap-1 transition-colors"
      >
        <Plus size={18} /> Thêm
      </button>
    </form>
  );
}

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

const PRIORITY_COLORS = {
  low: 'border-green-500/30 bg-green-500/5',
  medium: 'border-yellow-500/30 bg-yellow-500/5',
  high: 'border-red-500/30 bg-red-500/5',
};

const PRIORITY_BADGES = {
  low: 'bg-green-500/20 text-green-400',
  medium: 'bg-yellow-500/20 text-yellow-400',
  high: 'bg-red-500/20 text-red-400',
};

export function TaskItem({ task, onToggle, onDelete, onEdit }) {
  const [isEditing, setIsEditing] = useState(false);
  const [editText, setEditText] = useState(task.title);

  const handleSave = () => {
    onEdit(task.id, editText);
    setIsEditing(false);
  };

  return (
    <div className={`flex items-center gap-3 p-3 rounded-lg border ${PRIORITY_COLORS[task.priority]} mb-2`}>
      <button onClick={() => onToggle(task.id)}
        className={`w-5 h-5 rounded-full border-2 flex-shrink-0 flex items-center justify-center transition-colors ${task.completed ? 'bg-indigo-600 border-indigo-600' : 'border-gray-500 hover:border-indigo-400'}`}>
        {task.completed && <Check size={12} className="text-white" />}
      </button>

      {isEditing ? (
        <>
          <input value={editText} onChange={e => setEditText(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && handleSave()}
            className="flex-1 bg-gray-700 px-2 py-1 rounded text-white text-sm outline-none" autoFocus />
          <button onClick={handleSave} className="text-green-400 hover:text-green-300"><Check size={16} /></button>
          <button onClick={() => setIsEditing(false)} className="text-red-400 hover:text-red-300"><X size={16} /></button>
        </>
      ) : (
        <>
          <span className={`flex-1 text-sm ${task.completed ? 'line-through text-gray-500' : 'text-gray-100'}`}>
            {task.title}
          </span>
          <span className={`text-xs px-2 py-0.5 rounded-full ${PRIORITY_BADGES[task.priority]}`}>
            {task.priority === 'high' ? 'Cao' : task.priority === 'medium' ? 'TB' : 'Thấp'}
          </span>
          <button onClick={() => setIsEditing(true)} className="text-gray-400 hover:text-indigo-400 transition-colors"><Pencil size={15} /></button>
          <button onClick={() => onDelete(task.id)} className="text-gray-400 hover:text-red-400 transition-colors"><Trash2 size={15} /></button>
        </>
      )}
    </div>
  );
}

import { useState } from 'react';
import { useTasks } from './hooks/useTasks';
import { TaskForm } from './components/TaskForm';
import { TaskItem } from './components/TaskItem';

const FILTERS = ['Tất cả', 'Đang làm', 'Hoàn thành'];

export default function App() {
  const { tasks, addTask, toggleTask, deleteTask, editTask, clearCompleted } = useTasks();
  const [filter, setFilter] = useState('Tất cả');

  const filteredTasks = tasks.filter(t => {
    if (filter === 'Đang làm') return !t.completed;
    if (filter === 'Hoàn thành') return t.completed;
    return true;
  });

  const doneCount = tasks.filter(t => t.completed).length;

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      <div className="max-w-xl mx-auto px-4 py-10">
        <h1 className="text-3xl font-bold mb-1">Task Manager</h1>
        <p className="text-gray-400 mb-6">{doneCount}/{tasks.length} công việc hoàn thành</p>

        <TaskForm onAdd={addTask} />

        {/* Filter tabs */}
        <div className="flex gap-2 mb-4">
          {FILTERS.map(f => (
            <button key={f} onClick={() => setFilter(f)}
              className={`px-3 py-1 rounded-full text-sm transition-colors ${filter === f ? 'bg-indigo-600 text-white' : 'text-gray-400 hover:text-white'}`}>
              {f}
            </button>
          ))}
        </div>

        {/* Task list */}
        {filteredTasks.length === 0 ? (
          <p className="text-center text-gray-500 py-10">Không có công việc nào.</p>
        ) : (
          filteredTasks.map(task => (
            <TaskItem key={task.id} task={task} onToggle={toggleTask} onDelete={deleteTask} onEdit={editTask} />
          ))
        )}

        {doneCount > 0 && (
          <button onClick={clearCompleted} className="mt-4 text-sm text-red-400 hover:text-red-300">
            Xóa {doneCount} công việc đã hoàn thành
          </button>
        )}
      </div>
    </div>
  );
}

# Build cho production
npm run build
# Output: thư mục dist/ chứa file tĩnh

# Preview bản build local
npm run preview

# Deploy lên Netlify (cách đơn giản nhất)
# 1. Cài Netlify CLI
npm install -g netlify-cli

# 2. Đăng nhập Netlify
netlify login

# 3. Deploy
netlify deploy --prod --dir=dist
# Nhận URL dạng: https://your-app.netlify.app

# Hoặc deploy lên Vercel
npm install -g vercel
vercel --prod

:root {
  /* === COLORS === */
  --color-primary-50:  #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #6366f1;

  /* === NEUTRAL === */
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-700: #374151;
  --color-gray-900: #111827;

  /* === TYPOGRAPHY === */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */

  /* === SPACING (4px base) === */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */

  /* === RADIUS === */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

import React from 'react';
import './Button.css';

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';

interface ButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  disabled?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  children: React.ReactNode;
  onClick?: () => void;
  type?: 'button' | 'submit' | 'reset';
}

const Spinner = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" className="btn-spinner">
    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"
      fill="none" strokeDasharray="60" strokeDashoffset="15" />
  </svg>
);

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary', size = 'md', loading = false,
  disabled = false, leftIcon, rightIcon, children, onClick, type = 'button'
}) => {
  const isDisabled = disabled || loading;
  return (
    <button
      type={type}
      className={`btn btn--${variant} btn--${size}`}
      disabled={isDisabled}
      aria-disabled={isDisabled}
      aria-busy={loading}
      onClick={onClick}
    >
      {loading ? <Spinner /> : leftIcon && <span className="btn-icon">{leftIcon}</span>}
      <span>{loading ? 'Loading...' : children}</span>
      {!loading && rightIcon && <span className="btn-icon">{rightIcon}</span>}
    </button>
  );
};

export default Button;

import React, { useState, useMemo, useCallback } from 'react';

interface Product { id: number; name: string; price: number; category: string; }

const ProductList: React.FC<{ products: Product[] }> = ({ products }) => {
  const [search, setSearch] = useState('');
  const [category, setCategory] = useState('all');

  // useMemo: chỉ recalculate khi products, search, hoặc category thay đổi
  const filteredProducts = useMemo(() => {
    return products
      .filter(p => category === 'all' || p.category === category)
      .filter(p => p.name.toLowerCase().includes(search.toLowerCase()));
  }, [products, search, category]);

  // useMemo: tính toán expensive stats
  const stats = useMemo(() => ({
    total: filteredProducts.length,
    avgPrice: filteredProducts.reduce((sum, p) => sum + p.price, 0) / filteredProducts.length || 0,
    categories: [...new Set(products.map(p => p.category))]
  }), [filteredProducts, products]);

  // useCallback: tránh recreate handler function mỗi render
  const handleSearchChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value),
    [] // không có dependencies — function ổn định
  );

  return (
    <div>
      <input value={search} onChange={handleSearchChange} placeholder="Tìm sản phẩm..." />
      <p>{stats.total} sản phẩm | Giá TB: {stats.avgPrice.toFixed(0)}đ</p>
      {filteredProducts.map(p => <div key={p.id}>{p.name}</div>)}
    </div>
  );
};