Step 3: Adding data cards to dashboard

colbyfayock · Aug 8, 2023 · 0190eaf · 0190eaf
1 parent c9473c3
commit 0190eaf
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,38 @@
+import { Card, Metric, Text } from "@tremor/react";
+
 import './App.css'
 
+import dataBarbie from './movie-barbie.json';
+import dataOppenheimer from './movie-oppenheimer.json';
+
 function App() {
   return (
-    <>
-      <h1 className="text-3xl font-bold underline">
-        Hello world!
-      </h1>
-    </>
+    <div className="text-left">
+      <div className="grid grid-cols-2 gap-12">
+        <div>
+          <h2 className="text-2xl font-bold mb-6">Barbie</h2>
+          <Card className="max-w-xs mx-auto mb-6" decoration="top" decorationColor="indigo">
+            <Text>Revenue</Text>
+            <Metric>${ dataBarbie.global_revenue }</Metric>
+          </Card>
+          <Card className="max-w-xs mx-auto mb-6" decoration="top" decorationColor="indigo">
+            <Text>Budget</Text>
+            <Metric>${ dataBarbie.budget }</Metric>
+          </Card>
+        </div>
+        <div>
+          <h2 className="text-2xl font-bold mb-6">Oppenheimer</h2>
+          <Card className="max-w-xs mx-auto mb-6" decoration="top" decorationColor="indigo">
+            <Text>Revenue</Text>
+            <Metric>${ dataOppenheimer.global_revenue }</Metric>
+          </Card>
+          <Card className="max-w-xs mx-auto mb-6" decoration="top" decorationColor="indigo">
+            <Text>Budget</Text>
+            <Metric>${ dataOppenheimer.budget }</Metric>
+          </Card>
+        </div>
+      </div>
+    </div>
   )
 }
 

diff --git a/src/movie-barbie.json b/src/movie-barbie.json
@@ -0,0 +1,59 @@
+{
+  "budget": 145000000,
+  "global_revenue": 811024676,
+  "poster_path": "https://www.themoviedb.org/t/p/w1280/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg",
+  "release_date": "2023-07-19",
+  "title": "Barbie",
+  "vote_average": 7.52,
+  "vote_count": 1930,
+  "domestic_daily": [
+    {
+      "revenue": 70503178,
+      "date": "2023-07-21"
+    },
+    {
+      "revenue": 118315534,
+      "date": "2023-07-22"
+    },
+    {
+      "revenue": 162022044,
+      "date": "2023-07-23"
+    },
+    {
+      "revenue": 188127211,
+      "date": "2023-07-24"
+    },
+    {
+      "revenue": 214130780,
+      "date": "2023-07-25"
+    },
+    {
+      "revenue": 237164831,
+      "date": "2023-07-26"
+    },
+    {
+      "revenue": 258402851,
+      "date": "2023-07-27"
+    },
+    {
+      "revenue": 287435512,
+      "date": "2023-07-28"
+    },
+    {
+      "revenue": 322021941,
+      "date": "2023-07-29"
+    },
+    {
+      "revenue": 351414453,
+      "date": "2023-07-30"
+    },
+    {
+      "revenue": 366422042,
+      "date": "2023-07-31"
+    },
+    {
+      "revenue": 381724676,
+      "date": "2023-08-01"
+    }
+  ]
+}
diff --git a/src/movie-oppenheimer.json b/src/movie-oppenheimer.json
@@ -0,0 +1,59 @@
+{
+  "budget": 100000000,
+  "global_revenue": 419427495,
+  "poster_path": "https://www.themoviedb.org/t/p/w1280/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
+  "release_date": "2023-07-19",
+  "title": "Oppenheimer",
+  "vote_average": 8.3,
+  "vote_count": 1183,
+  "domestic_daily": [
+    {
+      "revenue": 33017635,
+      "date": "2023-07-21"
+    },
+    {
+      "revenue": 59265775,
+      "date": "2023-07-22"
+    },
+    {
+      "revenue": 82455420,
+      "date": "2023-07-23"
+    },
+    {
+      "revenue": 95127370,
+      "date": "2023-07-24"
+    },
+    {
+      "revenue": 107200900,
+      "date": "2023-07-25"
+    },
+    {
+      "revenue": 117856745,
+      "date": "2023-07-26"
+    },
+    {
+      "revenue": 127860430,
+      "date": "2023-07-27"
+    },
+    {
+      "revenue": 141287905,
+      "date": "2023-07-28"
+    },
+    {
+      "revenue": 159505020,
+      "date": "2023-07-29"
+    },
+    {
+      "revenue": 174566060,
+      "date": "2023-07-30"
+    },
+    {
+      "revenue": 181420520,
+      "date": "2023-07-31"
+    },
+    {
+      "revenue": 188402495,
+      "date": "2023-08-01"
+    }
+  ]
+}