react/components/SalesChart.tsx - gemini-react - ivaninvv/dashboard

react/components/SalesChart.tsx
57 строк3 KB
VladimirIvanin
react
30 ноя 2025, 03:42
30 ноя 2025, 03:4245b555a
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Icons } from './icons';

const SalesChart = () => {
  return (
    <Card className="col-span-1 lg:col-span-2 border-none shadow-card overflow-hidden">
      <CardHeader className="flex flex-row items-center justify-between px-6 pt-6 pb-0">
        <div>
          <CardTitle className="text-lg font-bold text-dark">Revenue Updates</CardTitle>
          <p className="text-sm text-muted mt-1">Overview of Profit</p>
        </div>
        <div className="flex gap-2">
           <select className="text-sm border-0 bg-transparent text-muted font-medium focus:ring-0 cursor-pointer">
              <option>March 2024</option>
              <option>April 2024</option>
              <option>May 2024</option>
           </select>
        </div>
      </CardHeader>
      <CardContent className="p-6">
        <div className="h-[300px] w-full flex items-end justify-between gap-4 pt-4">
           {/* Enhanced Mock Bar Chart */}
           {[60, 45, 75, 50, 80, 60, 90, 75].map((height, i) => (
              <div key={i} className="relative group w-full flex flex-col justify-end items-center h-full gap-2">
                 {/* Background Bar */}
                 <div className="w-full max-w-[12px] h-full bg-slate-100 rounded-full absolute bottom-0 left-1/2 -translate-x-1/2"></div>
                 
                 {/* Foreground Bar */}
                 <div 
                  className={`relative z-10 w-full max-w-[12px] rounded-full transition-all duration-500 ${i % 2 === 0 ? 'bg-primary' : 'bg-secondary'}`}
                  style={{ height: `${height}%` }}
                ></div>
                
                <span className="text-xs text-muted font-medium mt-2">
                  {['16/08','17/08','18/08','19/08','20/08','21/08','22/08','23/08'][i]}
                </span>
              </div>
           ))}
        </div>
        <div className="flex justify-center gap-6 mt-6">
            <div className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-primary"></span>
                <span className="text-sm text-muted">Earnings</span>
            </div>
            <div className="flex items-center gap-2">
                <span className="w-2 h-2 rounded-full bg-secondary"></span>
                <span className="text-sm text-muted">Expense</span>
            </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default SalesChart;