Add link preview <FloatingDock />

ajnart · Oct 10, 2024 · 76d63d9 · 76d63d9
1 parent d75f6bc
commit 76d63d9
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 14 deletions.
diff --git a/next.config.js b/next.config.js
@@ -11,6 +11,9 @@ const config = {
 		remotePatterns: [
 			{
 				hostname: "www.google.com",
+			},
+			{
+				hostname: "api.microlink.io",
 			}
 		],
 	}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "subs",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "author": {
     "name": "ajanrt",
     "email": "[email protected]"
@@ -31,7 +31,7 @@
     "@radix-ui/react-context-menu": "^2.2.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.1",
@@ -51,17 +51,22 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@t3-oss/env-nextjs": "^0.10.1",
+    "@tabler/icons-react": "^3.19.0",
+    "@types/canvas-confetti": "^1.6.4",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.33.0",
     "embla-carousel-react": "^8.3.0",
+    "framer-motion": "^11.11.7",
     "geist": "^1.3.0",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.446.0",
     "next": "^14.2.4",
     "next-themes": "^0.3.0",
+    "qss": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
-import '~/styles/globals.css'
-
 import { GeistSans } from 'geist/font/sans'
 import type { Metadata } from 'next'
+import { ThemeProvider } from 'next-themes'
+import '~/styles/globals.css'
 
 export const metadata: Metadata = {
   title: 'Subs - Your subscription tracker',
@@ -11,8 +11,12 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" className={`${GeistSans.variable}`}>
-      <body>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${GeistSans.variable} font-sans`}>
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,9 +10,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog'
+import { FloatingDock } from '@/components/ui/floating-dock'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { LinkPreview } from '@/components/ui/link-preview'
 import { PlusCircle } from 'lucide-react'
+import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import InstructionsPopup from '~/components/InstructionsPopup'
 import MadeWithKodu from '~/components/MadeWithKodu'
@@ -64,6 +67,12 @@ export default function Component() {
     setIsOpen(true)
   }
 
+  const dockItems = subscriptions.map((sub) => ({
+    title: sub.name,
+    icon: <Image src={sub.icon} width={64} height={64} alt={`${sub.name} icon`} />,
+    href: sub.url,
+  }))
+
   if (!mounted) {
     return null // Return null on initial render to avoid hydration mismatch
   }
@@ -143,18 +152,20 @@ export default function Component() {
         <div className="mt-8 mb-8 text-3xl font-semibold text-white text-center">
           Total Monthly: ${totalMonthly.toFixed(2)}
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {subscriptions.map((subscription) => (
-            <SubscriptionItem
-              key={subscription.id}
-              subscription={subscription}
-              onRemove={removeSubscription}
-              onEdit={handleEdit}
-            />
+            <LinkPreview key={subscription.id} url={subscription.url}>
+              <SubscriptionItem subscription={subscription} onRemove={removeSubscription} onEdit={handleEdit} />
+            </LinkPreview>
           ))}
         </div>
       </div>
       {env.NEXT_PUBLIC_SHOW_KODU === 'true' && <MadeWithKodu />}
+      <FloatingDock
+        items={dockItems}
+        desktopClassName="fixed bottom-4 left-1/2 transform -translate-x-1/2"
+        mobileClassName="fixed bottom-4 right-4"
+      />
     </div>
   )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,9 @@ const config = { @@
     		remotePatterns: [
     			{
     				hostname: "www.google.com",
+    			},
+    			{
+    				hostname: "api.microlink.io",
     			}
     		],
     	}
@@ Expand Down @@