mend

atlp-rwanda · Jul 17, 2024 · 5d03846 · 5d03846
1 parent 609c3b2
commit 5d03846
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/src/Components/SingleProduct/Sproduct.tsx b/src/Components/SingleProduct/Sproduct.tsx
@@ -34,7 +34,7 @@ const Sproduct: React.FC<{ productId: string }> = ({ productId }) => {
   const userData: any = useAuthUser();
   const [isLoading, setLoading] = useState<boolean>(false);
   const userId = userData ? userData.userId : "";
-
+  const [showFullDescription, setShowFullDescription] = useState<boolean>(false); 
   const getUserIdFromToken = (): string | null => {
     const token = localStorage.getItem('token');
     if (!token) return null;
@@ -257,7 +257,7 @@ const Sproduct: React.FC<{ productId: string }> = ({ productId }) => {
             ))}
           </div>
         </div>      <div className='md:w-1/3 w-full'>
-          <div className='flex flex-col gap-6 p-5 mt-10'>
+          <div className='flex flex-col gap-4 p-5 mt-10'>
             <h1><span className='text-[#E4A951]'>Stock</span> : <span className='font-extrabold text-blue-700'>{product.Vendor?.storeName}</span></h1>
             <h1 className='font-extrabold text-xl'>{product.name}</h1>
             <div className='bg-[#D9D9D9] p-2 rounded-md text-sm w-28 text-center font-bold'>{product.quantity} IN STOCK</div>
@@ -280,9 +280,26 @@ const Sproduct: React.FC<{ productId: string }> = ({ productId }) => {
               </div>
             </div>
             <div>
-              <h2 className='text-[#E4A951]'>Description</h2>
-              <p>{product.description}</p>
-            </div>
+  <h2 className="text-[#E4A951]">Description</h2>
+  {product.description ? (
+    showFullDescription ? (
+      <p>{product.description}</p>
+    ) : (
+      <div className="flex flex-col">
+        <p>{product.description.slice(0, 50)}...</p>
+        <button
+          onClick={() => setShowFullDescription(!showFullDescription)}
+          className="text-[#E4A951]"
+        >
+          {showFullDescription ? 'Show Less' : 'Show More'}
+        </button>
+      </div>
+    )
+  ) : (
+    <p>No description available.</p>
+  )}
+</div>
+
             <div className='flex-container flex  gap-4  w-full justify-center'>
               <div className="flex gap-4 border-2 justify-around items-center  rounded-lg p-2 md:w-[180px] bg-[#F7F7F7] font-bold">
                 <h3 className="">Quantity</h3>

diff --git a/src/Components/SingleProduct/reviews.tsx b/src/Components/SingleProduct/reviews.tsx
@@ -119,7 +119,7 @@ const Review: React.FC<{ productId: string }> = ({ productId }) => {
             <div className="flex justify-center">
             <div className="md:ml-0 py-4 w-4/5 flex flex-col justify-center ">
               <div className="bg-[#F9FAFB] mt-7 p-2.5 grid md:grid-cols-2 grid-cols-1 justify-between  md:w-full">
-                <p className="md:w-3/4 w-full">How will you rate this product?</p>
+                <p className="md:w-w-full w-full">How will you rate this product?</p>
                 <div className="mr-0 md:mr-4">
                   <StarRating
                     rating={ratingScore}