️🚏✨ ↝ [SGV2-13 SGV2-10 #104 #105]: well no longer feeling roger-roger

Author: Gizmotronn

components/Content/Visuals/Bento.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { cn } from "../../../lib/uitls";
 import React from "react";
-// import { BentoGrid, BentoGridItem } from "../../_Core/ui/bento-grid";
-// import {
-//   IconBoxAlignRightFilled,
-//   IconClipboardCopy,
-//   IconFileBroken,
-//   IconSignature,
-//   IconTableColumn,
-// } from "@tabler/icons-react";
+import { BentoGrid, BentoGridItem } from "../../_Core/ui/bento-grid";
+import {
+  IconBoxAlignRightFilled,
+  IconClipboardCopy,
+  IconFileBroken,
+  IconSignature,
+  IconTableColumn,
+} from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import Image from "next/image";
 import { ItemsVerticalList } from "../Inventory/UserOwnedItems";
@@ -32,19 +32,19 @@ export function BentoGridThirdDemo() {
 }
 
 export function BentoGridMobileDemo() {
-    return ( <></>
-        // <BentoGrid className="max-w-4xl mx-auto md:auto-rows-[20rem]">
-        //   {mobileItems.map((item, i) => (
-        //     <BentoGridItem
-        //       key={i}
-        //       title={item.title}
-        //       description={item.description}
-        //       header={item.header}
-        //       className={cn("[&>p:text-lg]", item.className)}
-        //       icon={item.icon}
-        //     />
-        //   ))}
-        // </BentoGrid>
+    return ( 
+        <BentoGrid className="max-w-4xl mx-auto md:auto-rows-[20rem]">
+          {mobileItems.map((item, i) => (
+            <BentoGridItem
+              key={i}
+              title={item.title}
+              description={item.description}
+              header={item.header}
+              className={cn("[&>p:text-lg]", item.className)}
+              icon={item.icon}
+            />
+          ))}
+        </BentoGrid>
     );
 }
 
@@ -315,7 +315,7 @@ const mobileItems = [
       ),
       header: <SkeletonOne />,
       className: "md:col-span-1",
-    //   icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
+      icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
     },
     {
       title: "",
@@ -324,7 +324,7 @@ const mobileItems = [
       ),
       header: <SkeletonFour />,
       className: "md:col-span-2",
-    //   icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
+      icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
     },
   ];
 

package.json

@@ -43,6 +43,7 @@
     "@supabase/auth-ui-react": "^0.2.6",
     "@supabase/supabase-js": "^2.13.1",
     "@supabase/ui": "^0.36.5",
+    "@tabler/icons-react": "^3.2.0",
     "@types/js-cookie": "^3.0.3",
     "@types/rc-slider": "^9.3.1",
     "@types/rc-tooltip": "^3.7.7",

yarn.lock

@@ -2498,6 +2498,18 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@tabler/icons-react@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-react/-/icons-react-3.2.0.tgz#1b8d4059672ec2999f29f9aea03c44f00084ce66"
+  integrity sha512-b1mZT1XpZrzvbM+eFe1YbYbxkzgJ18tM4knZKqXh0gnHDZ6XVLIH3TzJZ3HZ7PTkUqZLZ7XcGae3qQVGburlBw==
+  dependencies:
+    "@tabler/icons" "3.2.0"
+
+"@tabler/icons@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-3.2.0.tgz#4adcde021943d50f2c228dab6145fd9c9b639f85"
+  integrity sha512-h8GQ2rtxgiSjltrVz4vcopAxTPSpUSUi5nBfJ09H3Bk4fJk6wZ/dVUjzhv/BHfDwGTkAxZBiYe/Q/T95cPeg5Q==
+
 "@tailwindcss/forms@^0.5.3":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.7.tgz#db5421f062a757b5f828bc9286ba626c6685e821"