feat(home): adjust grid; add actual lib versions

wixplosives · Dec 30, 2024 · 2b1008e · 2b1008e
1 parent 2101ce4
commit 2b1008e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 27 deletions.
diff --git a/src/components/dashboard.tsx b/src/components/dashboard.tsx
@@ -40,14 +40,12 @@ export function Dashboard() {
         className={`flex-1 p-6 overflow-auto transition-[margin-left] duration-300
         ${isExpanded ? "ml-64" : "ml-16"}`}
       >
-        <div className="max-w-7xl">
-          {activeTab === "Home" && <Home />}
-          {activeTab !== "Home" && (
-            <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
-              <p className="text-gray-600 dark:text-gray-300">Content for {activeTab} panel goes here</p>
-            </div>
-          )}
-        </div>
+        {activeTab === "Home" && <Home />}
+        {activeTab !== "Home" && (
+          <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+            <p className="text-gray-600 dark:text-gray-300">Content for {activeTab} panel goes here</p>
+          </div>
+        )}
       </main>
     </div>
   );

diff --git a/src/components/home.tsx b/src/components/home.tsx
@@ -1,35 +1,42 @@
 import { ChartBarIcon, ChatBubbleLeftRightIcon, Cog6ToothIcon, FolderIcon } from "@heroicons/react/24/outline";
+import { version as reactVersion } from "react/package.json";
+import { version as electronVersion } from "electron/package.json";
+import { version as typescriptVersion } from "typescript/package.json";
+import { version as tailwindVersion } from "tailwindcss/package.json";
+import { memo } from "react";
 
 export const Home: React.FC = () => {
   return (
-    <div className="space-y-8">
+    <div>
       <div className="pb-10">
         <h1 className="text-5xl font-bold text-gray-800 dark:text-white mb-6">Example Electron Application</h1>
-        <p className="text-2xl text-gray-600 dark:text-gray-300">
-          A modern desktop application built with web technologies
-        </p>
+        <p className="text-2xl text-gray-600 dark:text-gray-300">A boilerplate to get started.</p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-        <FeatureCard
+      <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-4 gap-8">
+        <TechCard
           title="Electron"
           description="Built on Electron framework, enabling cross-platform desktop applications using web technologies."
           icon="⚛️"
+          version={electronVersion}
         />
-        <FeatureCard
+        <TechCard
           title="TypeScript"
           description="Strongly-typed programming with TypeScript for better development experience and fewer runtime errors."
           icon="📘"
+          version={typescriptVersion}
         />
-        <FeatureCard
+        <TechCard
           title="React"
           description="Modern UI development with React, featuring component-based architecture and hooks."
           icon="⚛️"
+          version={reactVersion}
         />
-        <FeatureCard
+        <TechCard
           title="Tailwind CSS"
           description="Utility-first CSS framework for rapid UI development with beautiful, responsive designs."
           icon="🎨"
+          version={tailwindVersion}
         />
       </div>
 
@@ -61,18 +68,23 @@ export const Home: React.FC = () => {
   );
 };
 
-const FeatureCard: React.FC<{
+const TechCard: React.FC<{
   title: string;
   description: string;
   icon: string;
-}> = ({ title, description, icon }) => (
-  <div className="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
-    <div className="flex items-center gap-4 mb-6">
-      <div className="text-4xl">{icon}</div>
-      <div>
-        <h3 className="text-2xl font-bold text-gray-800 dark:text-white">{title}</h3>
+  version: string;
+}> = memo(function TechCard({ title, description, icon, version }) {
+  return (
+    <div className="p-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-100 dark:border-gray-700">
+      <div className="flex items-center gap-4 mb-6">
+        <div className="text-4xl">{icon}</div>
+        <div>
+          <h3 className="text-2xl font-bold text-gray-800 dark:text-white">
+            {title} <span className="text-sm font-normal text-gray-500">v{version}</span>
+          </h3>
+        </div>
       </div>
+      <p className="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">{description}</p>
     </div>
-    <p className="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">{description}</p>
-  </div>
-);
+  );
+});