Build Apps with DeepSeek V3

import { useState } from "react"

function PasswordGenerator() {
  const [length, setLength] = useState(16)
  const [upper, setUpper] = useState(true)
  const [numbers, setNumbers] = useState(true)
  const [symbols, setSymbols] = useState(false)
  const [password, setPassword] = useState("")

  const generate = () => {
    let chars = "abcdefghijklmnopqrstuvwxyz"
    if (upper) chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    if (numbers) chars += "0123456789"
    if (symbols) chars += "!@#$%^&*()_+-="
    const arr = new Uint32Array(length)
    crypto.getRandomValues(arr)
    setPassword(Array.from(arr, v => chars[v % chars.length]).join(""))
  }

  return (
    <div className="max-w-md mx-auto p-6 space-y-4">
      <div className="flex items-center justify-between">
        <span>Length: {length}</span>
        <input type="range" min={8} max={64} value={length}
          onChange={e => setLength(+e.target.value)} />
      </div>
      {[["Uppercase", upper, setUpper], ["Numbers", numbers, setNumbers],
        ["Symbols", symbols, setSymbols]].map(([label, val, setter]) => (
        <label key={label as string} className="flex items-center gap-2">
          <input type="checkbox" checked={val as boolean}
            onChange={() => (setter as Function)(!val)} />
          {label as string}
        </label>
      ))}
      <button onClick={generate}
        className="w-full bg-blue-600 text-white py-2 rounded-lg">
        Generate
      </button>
      {password && (
        <div className="font-mono text-sm bg-gray-100 p-3 rounded break-all">
          {password}
        </div>
      )}
    </div>
  )
}