plugins and home page

package.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/components/plugins/Plugin.tsx

@@ -1,27 +1,62 @@
 // const PluginsData = require("../../../mockupData/Plugins.json");
 // import { Rating } from "react-simple-star-rating";
 
+import { Star } from "lucide-react";
+import { Card, CardContent, CardFooter, CardTitle } from "../ui/card";
+import { Ratings } from "../ui/rating";
+import { useLocation } from "react-router-dom";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
 export default function Plugin({ plugin }) {
+  console.log(plugin);
   return (
-    <a href={"https://www.spigotmc.org/resources/" + plugin.id}>
-      <div className="plugin">
-        <img src={"https://www.spigotmc.org/" + plugin.icon.url} />
-        <div className="Content">
-          <div className="Name">{plugin.name}</div>
-          <div className="Stars">
-            {plugin.rating.average}
-            {/* <Rating
-                      initialValue={plugin.rating.average}
-                      readonly={true}
-                      allowFraction={true}
-                      size={20}
-                      SVGstyle={{ display: "inline-block" }}
-                    /> */}
+    // <a href={"https://www.spigotmc.org/resources/" + plugin.id}>
+    <Card className="text-center">
+      <CardTitle className="truncate mx-2 my-2">
+        {plugin.name}
+        <p className="text-sm font-normal text-primary">
+          {new Date(plugin.updateDate * 1000).toLocaleString()}
+        </p>
+      </CardTitle>
+      <CardContent>
+        <img
+          className="mx-auto my-2 h-20"
+          src={"https://www.spigotmc.org/" + plugin.icon.url}
+        />
+        <div className="flex">
+          <div className="grow"></div>
+          <div className="grow-0">
+            <Ratings rating={plugin.rating.average} />
           </div>
-          <div className="Reviews">({plugin.rating.count})</div>
-          <div className="Mini-Description">{plugin.tag}</div>
-        </div>
-      </div>
-    </a>
+          <div className="grow"></div>
+        </div>{" "}
+        <p className="text-sm text-primary/80">{plugin.rating.count} ratings</p>
+        <p className="text-primary">{plugin.downloads} downloads</p>
+      </CardContent>
+      <CardFooter className="pr-2 pb-2 flex justify-between">
+        {plugin.premium && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>
+                <Star className="fill-current text-yellow-500"></Star>
+              </TooltipTrigger>
+              <TooltipContent>Premium</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+        <a
+          href={"https://www.spigotmc.org/resources/" + plugin.id}
+          target="_blank"
+          className="text-right ml-auto text-muted text-sm hover:underline"
+        >
+          View on Spigot...
+        </a>
+      </CardFooter>
+    </Card>
   );
 }