Matrix Code Rain Demo

1"use client";
2import React, { useState } from "react";
3import { MatrixCodeRain } from "../ui/matrix-code-rain";
4// Main Demo Component
5export default function MatrixCodeRainDemo() {
6  const [color, setColor] = useState("#00ff00");
7  const colors = [
8    "#00ff00",
9    "#ff0000",
10    "#0000ff",
11    "#ffff00",
12    "#ff00ff",
13    "#00ffff",
14    "#ff8800",
15    "#8800ff",
16    "#0088ff",
17    "#ff0088",
18  ];
19 
20  const handleColorChange = () => {
21    const randomColor = colors[Math.floor(Math.random() * colors.length)];
22    setColor(randomColor);
23  };
24 
25  return (
26    <div className="absolute bottom-0 left-0 w-full overflow-hidden">
27      <div>
28        <MatrixCodeRain color={color} />
29      </div>
30 
31      <div className="absolute inset-0 flex items-center justify-center">
32        <button
33          className="bg-black text-white border-2 border-white text-xl px-4 py-2 z-10 hover:bg-gray-800 transition-colors duration-200"
34          onClick={handleColorChange}
35        >
36          Change Color
37        </button>
38      </div>
39    </div>
40  );
41}