Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | "use client";
import React from "react";
import { useSession, signIn } from "next-auth/react";
import { useDispatch } from "react-redux";
import { AppDispatch, useAppSelector } from "@/redux/store";
import { clearWishlistAsync } from "@/redux/features/wishlistSlice";
import SingleItem from "./SingleItem";
import { Button } from "@/components/ui";
import { Icon } from "@/components/ui/icons";
const Wishlist = () => {
const dispatch = useDispatch<AppDispatch>();
const { status } = useSession();
const wishlistItems = useAppSelector((state) => state.wishlistReducer.items);
const loading = useAppSelector((state) => state.wishlistReducer.loading);
const handleClearWishlist = () => {
if (wishlistItems.length > 0) {
dispatch(clearWishlistAsync());
}
};
const handleSignIn = () => {
signIn();
};
// Show login prompt for unauthenticated users
if (status === "unauthenticated") {
return (
<section className="overflow-hidden pt-[140px] pb-20 bg-gray-2 dark:bg-gray-900">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
<div className="bg-white dark:bg-gray-800 rounded-[10px] shadow-1 p-10 text-center">
<div className="flex flex-col items-center gap-6">
<div className="w-20 h-20 rounded-full bg-gray-2 dark:bg-gray-700 flex items-center justify-center">
<Icon name="heart" size={40} className="text-gray-5 dark:text-gray-400" />
</div>
<h2 className="font-medium text-dark dark:text-gray-100 text-2xl">Sign In to View Your Wishlist</h2>
<p className="text-body dark:text-gray-300 max-w-md">
Please sign in to your account to view and manage your wishlist items.
Your wishlist will be saved and synced across all your devices.
</p>
<Button
variant="primary"
size="lg"
onClick={handleSignIn}
>
Sign In
</Button>
</div>
</div>
</div>
</section>
);
}
// Show loading state
if (status === "loading" || loading) {
return (
<section className="overflow-hidden pt-[140px] pb-20 bg-gray-2 dark:bg-gray-900">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
<div className="bg-white dark:bg-gray-800 rounded-[10px] shadow-1 p-10 text-center">
<p className="text-body dark:text-gray-300">Loading your wishlist...</p>
</div>
</div>
</section>
);
}
return (
<section className="overflow-hidden pt-[140px] pb-20 bg-gray-2 dark:bg-gray-900">
<div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
<div className="flex flex-wrap items-center justify-between gap-5 mb-7.5">
<h2 className="font-medium text-dark dark:text-gray-100 text-2xl">Your Wishlist</h2>
{wishlistItems.length > 0 && (
<Button
variant="ghost"
size="sm"
className="text-blue"
onClick={handleClearWishlist}
>
Clear Wishlist Cart
</Button>
)}
</div>
<div className="bg-white dark:bg-gray-800 rounded-[10px] shadow-1">
{wishlistItems.length === 0 ? (
<div className="p-10 text-center">
<div className="flex flex-col items-center gap-4">
<div className="w-16 h-16 rounded-full bg-gray-2 dark:bg-gray-700 flex items-center justify-center">
<Icon name="heart" size={32} className="text-gray-5 dark:text-gray-400" />
</div>
<h3 className="font-medium text-dark dark:text-gray-100 text-xl">Your wishlist is empty</h3>
<p className="text-body dark:text-gray-300">Browse our products and add items to your wishlist!</p>
</div>
</div>
) : (
<div className="w-full overflow-x-auto">
<div className="min-w-[1170px]">
{/* <!-- table header --> */}
<div className="flex items-center py-5.5 px-10">
<div className="min-w-[83px]"></div>
<div className="min-w-[387px]">
<p className="text-dark dark:text-gray-200">Product</p>
</div>
<div className="min-w-[205px]">
<p className="text-dark dark:text-gray-200">Unit Price</p>
</div>
<div className="min-w-[265px]">
<p className="text-dark dark:text-gray-200">Stock Status</p>
</div>
<div className="min-w-[150px]">
<p className="text-dark dark:text-gray-200 text-right">Action</p>
</div>
</div>
{/* <!-- wish item --> */}
{wishlistItems.map((item, key) => (
<SingleItem item={item} key={key} />
))}
</div>
</div>
)}
</div>
</div>
</section>
);
};
export default Wishlist;
|