Add empty state for bookmarks in feed page

thebkht · Nov 6, 2023 · 96fc19c · 96fc19c
1 parent cf9ab25
commit 96fc19c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/app/(Main)/feed/page.tsx b/app/(Main)/feed/page.tsx
@@ -17,6 +17,7 @@ import { getBookmarks } from '@/lib/prisma/session';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { dateFormat } from '@/lib/format-date';
 import { Icons } from '@/components/icon';
+import { EmptyPlaceholder } from '@/components/empty-placeholder';
 
 export default async function Feed({
   searchParams
@@ -89,14 +90,14 @@ export default async function Feed({
                 {topUsers && (
                   <FeaturedDev data={topUsers} />
                 )}
-                {bookmarks.length !== 0 && (
-                  <Card className="feed__content_featured_card bg-background border-none shadow-none">
+                <Card className="feed__content_featured_card bg-background border-none shadow-none">
                     <CardHeader className="py-4 px-0">
                       <CardTitle className="feed__content_featured_card_title text-base">Recently saved</CardTitle>
                     </CardHeader>
                     <CardContent className="p-0">
-                      <ol className="flex flex-col items-start justify-between space-y-4">
-                        {bookmarks.map(
+                      {bookmarks.length !== 0 ? (
+                        <ol className="flex flex-col items-start justify-between space-y-4">
+                        {bookmarks?.map(
                           (item: any, index: number) => (
                             <li key={item.id} className="text-sm space-y-2.5">
 
@@ -127,9 +128,16 @@ export default async function Feed({
                           </Link>
                         </li>
                       </ol>
+                      ) : (
+                        <EmptyPlaceholder className='min-h-min p-6'>
+                          <EmptyPlaceholder.Icon name='bookmark' className='h-5 w-5' parentClassName='h-10 w-10' />
+                          <EmptyPlaceholder.Description className='!my-2'>
+                            You haven’t saved any posts yet. Click the bookmark icon on a post to save it here.
+                          </EmptyPlaceholder.Description>
+                        </EmptyPlaceholder>
+                      )}
                     </CardContent>
                   </Card>
-                )}
               </div>
             </div>
           </div>

diff --git a/components/empty-placeholder.tsx b/components/empty-placeholder.tsx
@@ -33,16 +33,17 @@ interface EmptyPlaceholderIconProps
 EmptyPlaceholder.Icon = function EmptyPlaceHolderIcon({
   name,
   className,
+  parentClassName,
   ...props
-}: EmptyPlaceholderIconProps) {
+}: EmptyPlaceholderIconProps & { parentClassName?: string }) {
   const Icon = Icons[name]
 
   if (!Icon) {
     return null
   }
 
   return (
-    <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
+    <div className={cn("flex h-20 w-20 items-center justify-center rounded-full bg-muted", parentClassName)}>
       <Icon className={cn("h-10 w-10", className)} {...props} />
     </div>
   )

diff --git a/components/icon.tsx b/components/icon.tsx
@@ -27,6 +27,7 @@ import {
      User,
      X,
      type LucideIcon,
+     Bookmark,
    } from "lucide-react"
 
    export type Icon = LucideIcon
@@ -53,6 +54,7 @@ import {
      moon: Moon,
      laptop: Laptop,
      check: Check,
+     bookmark: Bookmark,
      logoIcon: (props: IconProps) => (
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 466.45 466" {...props} fill="none">
                <path d="M205.57,232.99H68.75L0,113.71h137.48l0.01,0.03L205.57,232.99z M205.57,232.99l-68.41,118.69L201.32,463