Graphs Components in Shadcn-Ui library

'use client';

import { Area, AreaChart } from "recharts"
import { Badge } from "@/components/ui/badge"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
} from "@/components/ui/card"

const chartData_graph_files_graph1 = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartContainer1_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#382CDD",
    },
}

const chartContainer2_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#2D70F5",
    },
}

const chartContainer3_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#17BB84",
    },
}

const chartContainer4_graph_files_graph1 = {
    desktop: {
        label: "Desktop",
        color: "#F67A28",
    },
}

const areaChart1_margin_graph_files_graph1 = {
    left: 0,
    right: 0,
}

export function Graph1() {
  return (
    <div className="py-4 px-4">
        <div className="flex flex-wrap -m-4">
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Total number of users</CardDescription>
                        <CardTitle className="text-3xl">1 450</CardTitle>
                        <Badge variant="secondary" className="text-xs font-medium text-muted-foreground">+115</Badge>

                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer1_graph_files_graph1}
                        >
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Revenue</CardDescription>
                        <CardTitle className="text-3xl">$9,054</CardTitle>
                        <Badge variant="destructive" className="text-xs font-medium">-$1,535</Badge>
                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer2_graph_files_graph1}
                        >
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Bounce Rate</CardDescription>
                        <CardTitle className="text-3xl">73.5%</CardTitle>
                        <Badge variant="secondary" className="text-xs font-medium text-muted-foreground">73.5%</Badge>

                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer3_graph_files_graph1}>
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
            <div className="p-4 w-full md:w-1/2 lg:w-1/4">
                <Card>
                    <CardHeader className="pb-4 items-center">
                        <CardDescription className="mb-2 text-xs">Visit Duration</CardDescription>
                        <CardTitle className="text-3xl">0m 50s</CardTitle>
                        <Badge variant="secondary" className="text-xs font-medium text-muted-foreground">+15s</Badge>

                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer
                            className="h-[100px] w-full"
                            config={chartContainer4_graph_files_graph1}
                        >
                            <AreaChart
                                accessibilityLayer
                                data={chartData_graph_files_graph1}
                                margin={areaChart1_margin_graph_files_graph1}
                                
                            >
                                <ChartTooltip
                                    cursor={false}
                                    content={<ChartTooltipContent indicator="line" />}
                                />
                                <Area
                                    dataKey="desktop"
                                    type="natural"
                                    fill="var(--color-desktop)"
                                    fillOpacity={0.4}
                                    stroke="var(--color-desktop)"
                                    
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>
        </div>
    </div>
  )
}