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

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/RewardProgress.tsx

@@ -1,40 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-
-// This would typically come from your backend or state management
-const rewards = [
-  { id: '1', name: 'Day off work', coinCost: 500 },
-  { id: '2', name: 'Movie night', coinCost: 100 },
-  { id: '3', name: 'New book', coinCost: 50 },
-]
-
-interface RewardProgressProps {
-  coinBalance: number
-}
-
-export default function RewardProgress({ coinBalance }: RewardProgressProps) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Progress Towards Rewards</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
-          {rewards.map((reward) => {
-            const progress = Math.min((coinBalance / reward.coinCost) * 100, 100)
-            return (
-              <div key={reward.id}>
-                <div className="flex justify-between mb-1">
-                  <span className="text-sm font-medium">{reward.name}</span>
-                  <span className="text-sm font-medium">{coinBalance}/{reward.coinCost} coins</span>
-                </div>
-                <Progress value={progress} className="w-full" />
-              </div>
-            )
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-

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,11 +34,13 @@ 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"
 
@@ -45,11 +48,13 @@ 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"