Add Hardware Price Tracker MVP

src/components/PriceChart.tsx

@@ -0,0 +1,73 @@
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
+
+export const PriceChart = () => {
+  // Mock data - will be replaced with real price history
+  const data = [
+    { date: "Jan 1", samsung: 1499, wd: 1499, crucial: 599 },
+    { date: "Jan 3", samsung: 1449, wd: 1450, crucial: 579 },
+    { date: "Jan 5", samsung: 1399, wd: 1450, crucial: 569 },
+    { date: "Jan 7", samsung: 1349, wd: 1399, crucial: 549 },
+    { date: "Jan 9", samsung: 1299, wd: 1450, crucial: 549 },
+  ];
+
+  const CustomTooltip = ({ active, payload, label }: any) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-card border border-border rounded-lg p-3 shadow-lg">
+          <p className="text-sm font-medium mb-2">{label}</p>
+          {payload.map((entry: any, index: number) => (
+            <p key={index} className="text-sm" style={{ color: entry.color }}>
+              {entry.name}: {entry.value} DKK
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <LineChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+        <XAxis 
+          dataKey="date" 
+          stroke="hsl(var(--muted-foreground))"
+          fontSize={12}
+        />
+        <YAxis 
+          stroke="hsl(var(--muted-foreground))"
+          fontSize={12}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Legend 
+          wrapperStyle={{ fontSize: '12px' }}
+        />
+        <Line 
+          type="monotone" 
+          dataKey="samsung" 
+          stroke="hsl(var(--chart-1))" 
+          name="Samsung 990 PRO"
+          strokeWidth={2}
+          dot={{ fill: "hsl(var(--chart-1))" }}
+        />
+        <Line 
+          type="monotone" 
+          dataKey="wd" 
+          stroke="hsl(var(--chart-2))" 
+          name="WD Black SN850X"
+          strokeWidth={2}
+          dot={{ fill: "hsl(var(--chart-2))" }}
+        />
+        <Line 
+          type="monotone" 
+          dataKey="crucial" 
+          stroke="hsl(var(--chart-3))" 
+          name="Crucial P5 Plus"
+          strokeWidth={2}
+          dot={{ fill: "hsl(var(--chart-3))" }}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+};