Build Apps with Llama 3 70B

import { useState } from "react"

function PaletteGenerator() {
  const [colors, setColors] = useState<string[]>([])

  const randomColor = () =>
    "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0")

  const generate = () =>
    setColors(Array.from({ length: 5 }, randomColor))

  const copy = (color: string) =>
    navigator.clipboard.writeText(color)

  return (
    <div className="p-6 text-center">
      <button onClick={generate}
        className="mb-6 px-6 py-3 bg-black text-white rounded-lg">
        Generate Palette
      </button>
      <div className="flex gap-2 justify-center">
        {colors.map((c, i) => (
          <div key={i} onClick={() => copy(c)}
            className="w-20 h-32 rounded-lg cursor-pointer hover:scale-105 transition-transform"
            style={{ backgroundColor: c }}>
            <span className="text-xs mt-24 block text-white drop-shadow">
              {c}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}