Merge pull request #167 from Ari1009/quick-link

Fix quick links navigation

Author: naveen-bandela-au2

src/components/QuickLinks.jsx

@@ -8,20 +8,26 @@ export function QuickLinks({ children }) {
   )
 }
 
-export function QuickLink({ title, description, icon }) {
+export function QuickLink({ title, description, icon, href }) {
+  const Container = href ? 'a' : 'div';
+  
   return (
-    <div className="group relative rounded-xl border border-slate-200 dark:border-slate-800">
+    <Container 
+      href={href}
+      className={`group relative rounded-xl border border-slate-200 dark:border-slate-800 block ${
+        href ? 'no-underline hover:cursor-pointer' : ''
+      }`}
+    >
       <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
       <div className="relative overflow-hidden rounded-xl p-6">
         <Icon icon={icon} className="h-8 w-8" />
         <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
-          <span className="absolute -inset-px rounded-xl" />
           {title}
         </h2>
         <p className="mt-1 text-sm text-slate-700 dark:text-slate-400">
           {description}
         </p>
       </div>
-    </div>
-  )
-}
+    </Container>
+  );
+}