feat: add HoverCard component and minimal page footer

src/app/login/page.tsx

@@ -2,9 +2,16 @@ import { auth } from '@/auth';
 import SSOLogin from '@/components/user/sso-login-button';
 import LoginForm from '@/components/user/login-form';
 import { redirect } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
 
 import '@/app/globals.css';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from '@/components/ui/hover-card';
 
 export default async function LoginPage() {
   const session = await auth();
@@ -15,20 +22,36 @@ export default async function LoginPage() {
 
   return (
     <div className='flex flex-col items-center justify-center h-screen'>
-      <Card className='w-[350px] max-w-screen'>
-        <CardHeader>
-          <CardTitle className='text-lg text-center'>Login</CardTitle>
-        </CardHeader>
-        <CardContent className='gap-6 flex flex-col'>
-          <LoginForm />
+      <div className='flex flex-col items-center justify-center h-screen'>
+        <Card className='w-[350px] max-w-screen'>
+          <CardHeader>
+            <CardTitle className='text-lg text-center'>Login</CardTitle>
+          </CardHeader>
+          <CardContent className='gap-6 flex flex-col'>
+            <LoginForm />
 
-          <hr />
+            <hr />
 
-          {process.env.AUTH_AUTHENTIK_ISSUER && (
-            <SSOLogin provider='authentik' providerDisplayName='SSO' />
-          )}
-        </CardContent>
-      </Card>
+            {process.env.AUTH_AUTHENTIK_ISSUER && (
+              <SSOLogin provider='authentik' providerDisplayName='SSO' />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+      <HoverCard>
+        <HoverCardTrigger className='text-sm text-muted-foreground hover:underline'>
+          <Button variant='link'>made with love</Button>
+        </HoverCardTrigger>
+        <HoverCardContent className='flex items-center justify-center'>
+          <Image
+            src='https://img1.wikia.nocookie.net/__cb20140808110649/clubpenguin/images/a/a1/Action_Dance_Light_Blue.gif'
+            width='150'
+            height='150'
+            alt='dancing penguin'
+            unoptimized={true}
+          ></Image>
+        </HoverCardContent>
+      </HoverCard>
     </div>
   );
 }

src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }