Refactor Invest page UI components, add responsive support for graph type selection

src/app/dashboard/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+"use client";
 import Image from "next/image";
 import {
   Card,
@@ -10,13 +10,10 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Overview } from "@/components/ui/overview";
 import { RecentSales } from "@/components/recent-sales";
-
-export const metadata: Metadata = {
-  title: "Dashboard",
-  description: "Example dashboard app built using the components.",
-};
+import { useState } from "react";
 
 export default function Dashboard() {
+  const [graphType, setGraphType] = useState("line");
   return (
     <>
       <div className="md:hidden">
@@ -163,7 +160,24 @@ export default function Dashboard() {
                     <CardTitle>Overview</CardTitle>
                   </CardHeader>
                   <CardContent className="pl-2">
-                    <Overview />
+                    <Overview graphType={graphType} />
+                    {/* tab to switch between line and bar graph */}
+                    <Tabs defaultValue="line" className="space-y-4 ml-[50%]">
+                      <TabsList>
+                        <TabsTrigger
+                          value="line"
+                          onClick={() => setGraphType("line")}
+                        >
+                          Line
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="bar"
+                          onClick={() => setGraphType("bar")}
+                        >
+                          Bar
+                        </TabsTrigger>
+                      </TabsList>
+                    </Tabs>
                   </CardContent>
                 </Card>
                 <Card className="col-span-3">

src/components/ui/overview.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, LineChart, Line } from "recharts";
 
 const data = [
   {
@@ -53,9 +53,36 @@ const data = [
   },
 ];
 
-export function Overview() {
+interface OverViewProps{
+    graphType:string;
+}
+
+export function Overview(props: OverViewProps) {
     return (
         <ResponsiveContainer width="100%" height={350}>
+          {props.graphType === 'line' ? (
+            <LineChart data={data}>
+              <XAxis
+                dataKey="name"
+                stroke="#888888"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                stroke="#888888"
+                fontSize={12}
+                tickLine={false}
+                axisLine={false}
+                tickFormatter={(value) => `$${value}`}
+              />
+              <Line
+                dataKey="total"
+                fill="currentColor"
+                className="fill-primary"
+              />
+            </LineChart>
+          ) : (
             <BarChart data={data}>
               <XAxis
                 dataKey="name"
@@ -74,10 +101,10 @@ export function Overview() {
               <Bar
                 dataKey="total"
                 fill="currentColor"
-          radius={[4, 4, 0, 0]}
                 className="fill-primary"
               />
             </BarChart>
+          )}
         </ResponsiveContainer>
       );
 }