use linkify to automatically convert links to href (#15)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.1.6
+
+### Added
+
+- make links clickable in habit, wishlist and calendar
+
 ## Version 0.1.5
 
 ### Added

components/DailyOverview.tsx

@@ -9,6 +9,7 @@ import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
 import { WishlistItemType } from '@/lib/types'
 import { Habit } from '@/lib/types'
+import Linkify from './linkify'
 
 interface UpcomingItemsProps {
   habits: Habit[]
@@ -91,7 +92,9 @@ export default function DailyOverview({
                           )}
                         </button>
                         <span className={isCompleted ? 'line-through' : ''}>
-                          {habit.name}
+                          <Linkify>
+                            {habit.name}
+                          </Linkify>
                         </span>
                       </span>
                       <span className="flex items-center text-xs text-muted-foreground">
@@ -144,7 +147,11 @@ export default function DailyOverview({
                     .map((item) => (
                       <div key={item.id} className="bg-secondary/20 p-3 rounded-md">
                         <div className="flex items-center justify-between mb-2">
-                          <span className="text-sm">{item.name}</span>
+                          <span className="text-sm">
+                            <Linkify>
+                              {item.name}
+                            </Linkify>
+                          </span>
                           <span className="text-xs flex items-center">
                             <Coins className="h-3 w-3 text-yellow-400 mr-1" />
                             {item.coinCost}

components/HabitCalendar.tsx

@@ -11,6 +11,7 @@ import { d2s, getNow } from '@/lib/utils'
 import { useAtom } from 'jotai'
 import { settingsAtom } from '@/lib/atoms'
 import { DateTime } from 'luxon'
+import Linkify from './linkify'
 
 export default function HabitCalendar() {
   const [settings] = useAtom(settingsAtom)
@@ -73,7 +74,9 @@ export default function HabitCalendar() {
                   const isCompleted = getHabitsForDate(selectedDate.toJSDate()).some(h => h.id === habit.id)
                   return (
                     <li key={habit.id} className="flex items-center justify-between">
-                      <span>{habit.name}</span>
+                      <span>
+                        <Linkify>{habit.name}</Linkify>
+                      </span>
                       {isCompleted ? (
                         <Badge variant="default">Completed</Badge>
                       ) : (

components/Layout.tsx

@@ -1,4 +1,5 @@
 import Header from './Header'
+import LinkifyComponent from './linkify'
 import Navigation from './Navigation'
 
 export default function Layout({ children }: { children: React.ReactNode }) {

components/linkify.tsx

@@ -0,0 +1,5 @@
+import Linkify0 from "linkify-react";
+
+export default function Linkify({ children }: { children: React.ReactNode }) {
+  return <Linkify0 options={{ className: "underline" }}>{children}</Linkify0>;
+}

components/ui/card.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import Linkify from "../linkify"
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -33,23 +34,27 @@ const CardTitle = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
+  <Linkify>
+    <div
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  </Linkify>
 ))
 CardTitle.displayName = "CardTitle"
 
 const CardDescription = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+  <Linkify>
+    <div
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  </Linkify>
 ))
 CardDescription.displayName = "CardDescription"