ekart/src/app/features/product/show-product/show-product.html

<div class="bg-gray-100 py-8 font-sans text-slate-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <nav class="flex text-sm text-gray-500 mb-6 items-center space-x-2">
      <a href="#" class="hover:text-gray-900">Home</a>
      <span>›</span>
      <a href="#" class="hover:text-gray-900">{{ product()?.category?.name }}</a>
      <span>›</span>
      <a href="#" class="hover:text-gray-900">{{ product()?.title }}</a>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
      <div class="lg:col-span-4 flex flex-col gap-4">
        <div class="card aspect-square relative">
          <img
            [src]="product()?.productImages?.[activeImageIndex()] ?? ''"
            alt="Product Image"
            class="w-full h-full object-cover object-center rounded-lg"
          />
          <button
            class="absolute top-2 right-2 p-2! rounded-full! btn btn-ghost border-none! bg-gray-50"
          >
            <lucide-angular [img]="HeartIcon" class="w-4 h-4" />
          </button>
          <button
            (click)="prevImage()"
            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost"
          >
            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4" />
          </button>
          <button
            (click)="nextImage()"
            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost"
          >
            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4" />
          </button>
        </div>

        <div class="grid grid-cols-4 gap-3">
          @for (image of product()?.productImages; track image) {

          <button
            class="card p-2! aspect-square cursor-pointer"
            (click)="this.activeImageIndex.set($index)"
          >
            <img [src]="image" alt="Thumbnail 1" class="w-full h-full object-cover rounded-lg" />
          </button>
          }
        </div>
      </div>

      <div class="lg:col-span-5 flex flex-col space-y-5">
        <div class="flex flex-col gap-1">
          <p class="text-3xl font-semibold">{{ product()?.title }}</p>

          <div class="flex items-center gap-2">
            <span class="text-sm text-gray-400">Category:</span>
            <a href="#" class="text-sm text-gray-600 hover:text-gray-900"
              >{{ product()?.category?.name }}</a
            >
          </div>

          <div class="flex items-center gap-2">
            <div class="flex text-yellow-400 text-lg">
              <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
            </div>
            <span class="text-sm font-medium">4.8</span>
            <span class="text-xs text-gray-400"></span>
            <span class="text-sm text-gray-600 ml-2">112 Reviews</span>
          </div>
        </div>
        <div class="min-h-40">
          <h2 class="text-xl font-medium mb-3">Product Description</h2>
          <p class="text-gray-700 text-sm leading-relaxed mb-4">{{ product()?.description }}</p>
        </div>

        <div>
          <h3 class="text-lg font-medium mb-3">Customer Reviews</h3>
          <ul class="list-disc list-outside ml-4 space-y-2 text-sm text-gray-700 relative pb-4">
            <li>
              "Rich in condensed nutrients using daily."
              <span class="text-[10px] text-gray-400"></span>
            </li>
            <li>"Seedless & Eco-Peel it" <span class="text-[10px] text-gray-400"></span></li>
            <li>
              "Longer Shelf Life has encounant" <span class="text-[10px] text-gray-400"></span>
            </li>
          </ul>
        </div>
      </div>

      <div class="lg:col-span-3 flex flex-col gap-6">
        <div class="card">
          <div class="flex justify-between items-start mb-6">
            <div class="flex items-baseline gap-2">
              <span class="text-xl text-gray-400 line-through decoration-1"
                >Rs.{{ product()?.actualPrice }}</span
              >
              <span class="text-3xl font-bold text-gray-900">Rs.{{ product()?.listPrice }}</span>
              <span class="text-xs text-gray-400 ml-1"></span>
            </div>
            <button class="text-gray-400 hover:text-red-500">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                ></path>
              </svg>
            </button>
          </div>

          <div class="flex mb-6 overflow-hidden">
            <button class="px-4 py-2 btn btn-ghost rounded-r-none!">−</button>
            <input
              type="text"
              value="1"
              class="w-12 text-center btn btn-ghost rounded-none! border-x-0!"
              readonly
            />
            <button class="px-4 py-2 btn btn-ghost rounded-l-none!">+</button>
          </div>

          <div class="flex flex-col gap-3">
            <button class="w-full btn btn-ghost">Add to Cart</button>
            <button class="w-full btn btn-primary">Buy Now</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>