radius

src/components/app.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { useRouter } from 'next/navigation'
+
+import { Item } from '@/lib/types'
+
+export default function App({ title, image, url }: Item) {
+  const router = useRouter()
+  return (
+    <div
+      className="relative group cursor-pointer hover:scale-105 duration-100 transition-all"
+      onClick={() => {
+        router.push(`/go/${btoa(url)}`)
+      }}
+    >
+      <img src={image} className="h-36 aspect-square object-cover rounded-md" />
+      <div className="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-accent to-transparent rounded-b-md duration-100 flex items-end p-2 px-4 font-semibold">
+        <p>{title}</p>
+      </div>
+    </div>
+  )
+}