Fix chart layout

sgcarstrends · Nov 3, 2023 · 3545b57 · 3545b57
1 parent 7e807eb
commit 3545b57
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 15 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import type { Metadata } from "next";
 import Script from "next/script";
 import { Inter } from "next/font/google";
+import classNames from "classnames";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -29,7 +30,12 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
           gtag('config', '${gaMeasurementId}');
         `}
       </Script>
-      <body className={inter.className}>
+      <body
+        className={classNames(
+          inter.className,
+          "bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50",
+        )}
+      >
         <main className="mx-auto w-full max-w-6xl px-4 py-8">{children}</main>
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -44,9 +44,13 @@ const Home = async () => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
-      <div className="flex flex-col items-center">
-        <h1>Singapore EV Trends</h1>
-        <div className="h-screen w-full">
+      <div className="flex flex-col items-center gap-8">
+        <div className="prose dark:prose-invert">
+          <h1>
+            Singapore <br className="md:hidden" /> EV Trends
+          </h1>
+        </div>
+        <div className="aspect-video w-full">
           <LineChart data={data} options={options} />
         </div>
       </div>

diff --git a/bun.lockb b/bun.lockb
diff --git a/components/LineChart.tsx b/components/LineChart.tsx
@@ -32,5 +32,5 @@ type LineChartProps = {
 };
 
 export const LineChart = ({ data, options }: LineChartProps) => {
-  return <Line data={data} options={options} />;
+  return <Line data={data} options={options} className="bg-neutral-50 p-4" />;
 };
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "chart.js": "^4.4.0",
+    "classnames": "^2.3.2",
     "d3": "^7.8.5",
     "next": "14.0.0",
     "react": "^18",
@@ -23,6 +24,7 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
+    "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/d3": "^7.4.2",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,20 +1,20 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
-  plugins: [],
-}
-export default config
+  plugins: [require("@tailwindcss/typography")],
+};
+export default config;