Fjodor

[fjodor10]

import React, { useState } from 'react';
import {
Menu, X, Wallet, Bell, User, Info, Phone, HelpCircle,
ChevronRight, ChevronDown, Send, Repeat, CreditCard,
BarChart2, Blocks
} from 'lucide-react';

const theme = {
colors: {
primary: '#2BFF00',
gold: '#FFD700',
dark: '#151515',
crypto: '#00F0FF',
glow: {
primary: 'rgba(43, 255, 0, 0.2)',
gold: 'rgba(255, 215, 0, 0.2)',
crypto: 'rgba(0, 240, 255, 0.15)'
}
}
};

const Dashboard = () => {
const [menuOpen, setMenuOpen] = useState(false);
const [balanceVisible, setBalanceVisible] = useState(true);

return (

{/* Header /}

<div
className="bg-black/95 border-b border-[#2BFF00]/10"
style={{ boxShadow: '0 2px 20px rgba(43, 255, 0, 0.1)' }}
>

{/ Left Side Controls */}

<div
className="absolute inset-0 rounded-full transition-all duration-300"
style={{
background: 'radial-gradient(circle, rgba(43, 255, 0, 0.2), transparent 70%)',
boxShadow: '0 0 15px rgba(43, 255, 0, 0.2)'
}}
/>

          <button 
            onClick={() => setMenuOpen(!menuOpen)}
            className="relative w-10 h-10 flex flex-col items-center justify-center gap-1.5"
          >
            <div 
              className="absolute inset-0 rounded-full transition-all duration-300"
              style={{
                background: 'radial-gradient(circle, rgba(43, 255, 0, 0.2), transparent 70%)',
                boxShadow: '0 0 15px rgba(43, 255, 0, 0.2)'
              }}
            />
            {[...Array(3)].map((_, i) => (
              <div 
                key={i}
                className="w-5 h-0.5 rounded-full relative z-10"
                style={{
                  background: '#2BFF00',
                  boxShadow: '0 0 10px rgba(43, 255, 0, 0.5)'
                }}
              />
            ))}
          </button>
        </div>

        {/* Right Side Actions */}
        <div className="flex items-center gap-4">
          <div className="relative">
            <Bell className="w-6 h-6 text-[#FFD700] cursor-pointer" />
            <div className="absolute top-0 right-0 w-2 h-2 rounded-full bg-[#2BFF00]" />
          </div>
          <User className="w-6 h-6 text-[#FFD700] cursor-pointer" />
        </div>
      </div>
    </div>

    {/* Sliding Menu */}
    {menuOpen && (
      <div className="fixed inset-0 z-50">
        <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={() => setMenuOpen(false)} />
        <div 
          className="absolute left-0 top-0 bottom-0 w-72 bg-[#151515] border-r border-[#2BFF00]/20"
          style={{ boxShadow: '5px 0 20px rgba(43, 255, 0, 0.1)' }}
        >
          <div className="p-6 border-b border-[#2BFF00]/10">
            <div className="flex items-center gap-3">
              <Wallet className="w-6 h-6 text-[#2BFF00]" />
              <h1 
                className="text-2xl font-serif"
                style={{
                  background: 'linear-gradient(to right, #2BFF00, #FFD700)',
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  textShadow: '0 0 10px rgba(43, 255, 0, 0.3)'
                }}
              >
                E-Coin
              </h1>
            </div>
          </div>

          {/* Menu Items */}
          <MenuGroup title="Information">
            <MenuItem icon={Info} label="About E-Coin" />
            <MenuItem icon={Phone} label="Contact Support" />
            <MenuItem icon={HelpCircle} label="Help Center" />
          </MenuGroup>
        </div>
      </div>
    )}
  </header>

  {/* Main Content */}
  <main className="pt-16 px-4">
    <div className="max-w-xl mx-auto space-y-8">
      {/* Action Buttons */}
      <div className="grid grid-cols-2 gap-4">
        <ActionButton icon={Send} label="Send Money" description="Transfer funds" />
        <ActionButton icon={Repeat} label="Convert" description="Exchange currencies" />
      </div>
    </div>
  </main>
</div>

);
};

const MenuGroup = ({ title, children }) => (

{title}

{children}

);

const MenuItem = ({ icon: Icon, label }) => (

{label}

);

const ActionButton = ({ icon: Icon, label, description }) => (


{label}
{description}

);

export default Dashboard;