display websites as links

Author: StackOverflowIsBetterThanAnyAI

src/components/ui/accordion.tsx

@@ -55,7 +55,7 @@ function AccordionContent({
     return (
         <AccordionPrimitive.Content
             data-slot="accordion-content"
-            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-sm"
             {...props}
         >
             <div className={cn('pt-0 pb-4', className)}>{children}</div>

src/components/ui/button.tsx

@@ -24,6 +24,7 @@ const buttonVariants = cva(
                 sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
                 lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
                 icon: 'size-9',
+                link: 'px-2 py-1 -mx-2 -my-1 underline text-small',
             },
         },
         defaultVariants: {

src/components/users/Users.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useContext, useState } from 'react'
+import Link from 'next/link'
 import {
     Accordion,
     AccordionContent,
     AccordionItem,
     AccordionTrigger,
 } from '@/components/ui/accordion'
+import { Button } from '@/components/ui/button'
 import {
     Card,
     CardContent,
@@ -82,7 +84,12 @@ const Users = () => {
                                               <p>{item.company.bs}</p>
                                           </CardContent>
                                           <CardFooter>
-                                              {item.website}
+                                              <Button
+                                                  variant="link"
+                                                  size="link"
+                                              >
+                                                  {item.website}
+                                              </Button>
                                           </CardFooter>
                                       </Card>
                                   ))
@@ -154,11 +161,14 @@ const Users = () => {
                                                                 </p>
                                                             </CardDescription>
                                                             <CardFooter className="px-0">
-                                                                <p>
+                                                                <Button
+                                                                    variant="link"
+                                                                    size="link"
+                                                                >
                                                                     {
                                                                         item.website
                                                                     }
-                                                                </p>
+                                                                </Button>
                                                             </CardFooter>
                                                         </AccordionContent>
                                                     </AccordionItem>