feat(ui): add ShareButton component for sharing functionality and update InfiniteList pageSize to 48

Author: tyronejosee

src/components/auth/user-profile.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import type { User } from "@supabase/supabase-js";
-
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import {
@@ -13,7 +11,9 @@ import {
   DropdownTrigger,
   Skeleton,
 } from "@heroui/react";
+import { Layers3, LayoutDashboard, LogOut } from "lucide-react";
 import { createClient } from "@/lib/supabase/client";
+import type { User } from "@supabase/supabase-js";
 
 export default function UserProfile() {
   const router = useRouter();
@@ -108,6 +108,7 @@ export default function UserProfile() {
             key="admin-dashboard"
             textValue="Dashboard"
             onPress={() => router.push("/dashboard")}
+            startContent={<LayoutDashboard size={16} />}
           >
             Dashboard
           </DropdownItem>
@@ -116,10 +117,16 @@ export default function UserProfile() {
           key="my-resources"
           textValue="My Resources"
           onPress={() => router.push("/my-resources")}
+          startContent={<Layers3 size={16} />}
         >
           My Resources
         </DropdownItem>
-        <DropdownItem key="logout" textValue="Log out" onPress={handleLogout}>
+        <DropdownItem
+          key="logout"
+          textValue="Log out"
+          onPress={handleLogout}
+          startContent={<LogOut size={16} />}
+        >
           Log out
         </DropdownItem>
       </DropdownMenu>

src/components/resources/resource-detail.tsx

@@ -1,15 +1,13 @@
 "use client";
 
-import type { Resource } from "@/types";
-
 import Link from "next/link";
 import { Avatar, Button, Card, Chip, Image } from "@heroui/react";
 import { formatDistanceToNow } from "date-fns";
 import { ArrowUpRight, Clock, Hash } from "lucide-react";
+import { ShareButton } from "@/components/ui";
+import type { Resource } from "@/types";
 
-type Props = {
-  resource: Resource;
-};
+type Props = { resource: Resource };
 
 const comments = [
   {
@@ -104,6 +102,7 @@ export default function ResourceDetail({ resource }: Props) {
                 </span>
               </div>
               <div className="flex gap-2">
+                <ShareButton />
                 <Button
                   as={Link}
                   size="sm"
@@ -131,13 +130,15 @@ export default function ResourceDetail({ resource }: Props) {
 
           {/* Image */}
           {resource.image && (
-            <figure className="overflow-hidden rounded-xl border-2 border-neutral-200 dark:border-neutral-800">
+            <figure className="overflow-hidden rounded-xl border-2 border-neutral-200 dark:border-neutral-800 aspect-[2/1]">
               <Image
-                src={resource.image || "/placeholder.svg"}
+                isBlurred
+                src={resource.image}
                 alt={`Image for ${resource.name}`}
-                width={600}
-                height={400}
-                className="h-auto w-full object-cover transition-all hover:scale-105"
+                loading="eager"
+                radius="none"
+                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                className="w-full h-full object-cover"
               />
             </figure>
           )}

src/components/ui/breadcrumbs.tsx

@@ -5,32 +5,40 @@ import { Breadcrumbs as HeroBreadcrumbs, BreadcrumbItem } from "@heroui/react";
 import { capitalize } from "@/lib/utils";
 
 export default function Breadcrumbs() {
-  // ! TODO: add blacklist for breadcrumbs
   const router = useRouter();
   const pathname = usePathname();
 
+  const blacklist = ["/resources", "/categories"];
+
   const segments = pathname.split("/").filter(Boolean);
   const paths = segments.map(
     (_, idx) => "/" + segments.slice(0, idx + 1).join("/"),
   );
 
   return (
     <HeroBreadcrumbs
-      itemClasses={{
-        separator: "px-2",
-      }}
       separator="/"
+      itemClasses={{ separator: "px-2" }}
       classNames={{ base: "hidden md:flex" }}
     >
-      {segments.map((segment, idx) => (
-        <BreadcrumbItem
-          key={paths[idx]}
-          onPress={() => router.push(paths[idx])}
-          isCurrent={idx === segments.length - 1}
-        >
-          {capitalize(decodeURIComponent(segment).replace(/-/g, " "))}
-        </BreadcrumbItem>
-      ))}
+      {segments.map((segment, idx) => {
+        const path = paths[idx];
+        const isCurrent = idx === segments.length - 1;
+        const isDisabled = blacklist.includes(path);
+
+        return (
+          <BreadcrumbItem
+            key={path}
+            isCurrent={isCurrent}
+            isDisabled={isCurrent || isDisabled}
+            onPress={
+              isCurrent || isDisabled ? undefined : () => router.push(path)
+            }
+          >
+            {capitalize(decodeURIComponent(segment).replace(/-/g, " "))}
+          </BreadcrumbItem>
+        );
+      })}
     </HeroBreadcrumbs>
   );
 }

src/components/ui/index.ts

@@ -10,5 +10,8 @@ export { default as HeadingDashboard } from "./heading-dashboard";
 export { default as InfiniteList } from "./infinite-list";
 export { default as LinearLoading } from "./linear-loading";
 export { default as PulseDotsLoading } from "./pulse-dots-loading";
+export { default as ShareButton } from "./share-button";
 export { default as Table } from "./table";
 export { default as ThemeSwitcher } from "./theme-switcher";
+
+export * from "./scroll-progress";

src/components/ui/infinite-list.tsx

@@ -21,7 +21,7 @@ type Props<T> = {
 };
 
 export default function InfiniteList<T>({
-  pageSize = 10,
+  pageSize = 48,
   loadMore,
   renderItem,
   renderWrapper = (children) => <>{children}</>,

src/components/ui/share-button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Button } from "@heroui/react";
+import { Share } from "lucide-react";
+
+export default function ShareButton() {
+  const shareData = {
+    title: "Page Title",
+    text: "Check out this page!",
+    url: window.location.href,
+  };
+
+  const handleShare = async () => {
+    try {
+      if (navigator.share) {
+        await navigator.share(shareData);
+      }
+    } catch (error) {
+      console.error("Error sharing:", error);
+    }
+  };
+
+  return (
+    <Button
+      isIconOnly
+      size="sm"
+      variant="bordered"
+      onPress={handleShare}
+      className="border-2 border-neutral-200 dark:border-neutral-800"
+    >
+      <Share size={16} />
+    </Button>
+  );
+}