feat(profiles): formatted description with links

src/components/profile-description.tsx

@@ -2,6 +2,37 @@ import {cn} from '@/lib/utils';
 import {ChevronDown, ChevronUp} from 'lucide-react';
 import {useEffect, useRef, useState} from 'react';
 
+const URL_REGEX = /((?:https?):\/\/[^\s]+)/g;
+
+function FormattedDescription({description}: {description: string}) {
+    const parts = description.split(URL_REGEX);
+
+    return (
+        <p>
+            {parts.map((part, index) => {
+                if (part.match(URL_REGEX)) {
+                    return (
+                        <a
+                            key={index}
+                            href={part}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={cn(
+                                'font-medium text-primary underline underline-offset-4',
+                                'decoration-primary/30 transition-colors hover:decoration-primary',
+                                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                            )}
+                        >
+                            {part}
+                        </a>
+                    );
+                }
+                return part;
+            })}
+        </p>
+    );
+}
+
 export function ProfileDescription({description}: {description: string}) {
     const [expanded, setExpanded] = useState(false);
     const [canExpand, setCanExpand] = useState(false);
@@ -17,15 +48,15 @@ export function ProfileDescription({description}: {description: string}) {
 
     return (
         <>
-            <p
+            <div
                 className={cn(
                     'text-neutral-700 dark:text-zinc-400 wrap-break-word whitespace-pre-wrap transition-all duration-300 ease-in-out',
                     !expanded && 'line-clamp-4 sm:line-clamp-3',
                 )}
                 ref={descriptionRef}
             >
-                {description}
-            </p>
+                <FormattedDescription description={description} />
+            </div>
 
             {canExpand && (
                 <button