/plugins mobile ready

RonanPlugins · May 21, 2024 · 13de524 · 13de524
1 parent 9c9c2d7
commit 13de524
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/src/components/plugins/Plugin.tsx b/src/components/plugins/Plugin.tsx
@@ -26,13 +26,10 @@ export default function Plugin({ plugin }: { plugin: any }) {
           className=" mx-auto my-2 h-20 hover: border rounded-xl bg-white bg-gradient-to-r from-cyan-500 to-blue-500"
           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="grow"></div>
-        </div>{" "}
+        <div className="flex">
+          <Ratings rating={plugin.rating.average} />
+        </div>
+
         <p className="text-sm text-gray-500">{plugin.rating.count} ratings</p>
         <p className="">{plugin.downloads} downloads</p>
       </CardContent>

diff --git a/src/components/ui/rating.tsx b/src/components/ui/rating.tsx
@@ -49,7 +49,7 @@ const Ratings = ({ ...props }: RatingsProps) => {
     ) : null;
 
   return (
-    <div className={cn("flex items-center gap-2")} {...props}>
+    <div className="flex mx-auto">
       {[...Array(fullStars)].map((_, i) =>
         React.cloneElement(Icon, {
           key: i,

diff --git a/src/pages/Plugins.tsx b/src/pages/Plugins.tsx
@@ -37,8 +37,8 @@ const Plugins = () => {
       <h1 className="text-center font-bold text-secondary px-4 bg-primary rounded-full">
         Premium Plugins
       </h1>
-      <div className="my-10 grid grid-cols-3 gap-3 mx-10">
-        {/* Premium Plugins */}
+      {/* Premium Plugins */}
+      <div className="my-10 grid grid-cols-2 sm:grid-cols-3 gap-3 mx-5">
         {pluginsPremium.map((plugin) => (
           <Plugin key={(plugin as any).id} plugin={plugin} />
         ))}
@@ -47,7 +47,7 @@ const Plugins = () => {
       <h1 className="text-center font-bold text-secondary px-4 bg-primary rounded-full">
         Free Plugins
       </h1>
-      <div className="my-10 grid grid-cols-4 gap-3 mx-10">
+      <div className="my-10 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mx-5">
         {pluginsFree.map((plugin) => (
           <Plugin key={(plugin as any).id} plugin={plugin} />
         ))}