bestpc/src/components/buildpc/CreateBuildpc.tsx

import { useState } from "react";
import { PopupBuildpc } from "../../components/buildpc/PopupBuildpc";

export function CreateBuildpc() {
  const [showPopup, setShowPopup] = useState(false);

  return (
    <>
      <div className="mt-6 flex items-center border-b-[1px] border-neutral-200 pb-3">
        <b className="left w-[200px] name-component">Sản phẩm</b>
        <div className="right w-[calc(100%-200px)] grid grid-cols-8">
          <b className="item col-span-3">Thông tin</b>
          <b className="item">Giá gốc</b>
          <b className="item">Khuyến mãi</b>
          <b className="item">Thành tiền</b>
          <b className="item col-span-2">Nhà cung cấp </b>
        </div>
      </div>
      {/* <!-- header list buildpc --> */}
      <div className="list-buildpc">
        <div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU</b>
          <div className="right w-[calc(100%-200px)]">
            <div className="item-info-product grid items-center grid-cols-8">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href="/buildpc/detail"
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href="/buildpc/detail"
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="total-amount">4.000.000đ</b>
              <div className="supplier col-span-2 flex items-center justify-between">
                <a href="">
                  <img
                    src="/assets/images/logo-hacom.png"
                    width="100%"
                    height="100%"
                    className="w-full block h-[30px] object-contain"
                    alt=""
                  />
                </a>
                <div className="btn flex items-center">
                  <a
                    href=""
                    className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                  >
                    Mua ngay
                  </a>
                  <a
                    href=""
                    className="group hover:bg-red-500 p-1.5 rounded-[50%]"
                  >
                    <i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="item-component flex items-start py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU Cooler</b>
          <div className="right w-[calc(100%-200px)]">
            <div className="item-info-product grid items-center grid-cols-8">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href="/buildpc/detail"
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href="/buildpc/detail"
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="total-amount">4.000.000đ</b>
              <div className="supplier col-span-2 flex items-center justify-between">
                <a href="">
                  <img
                    src="/assets/images/logo-hacom.png"
                    width="100%"
                    height="100%"
                    className="w-full block h-[30px] object-contain"
                    alt=""
                  />
                </a>
                <div className="btn flex items-center">
                  <a
                    href=""
                    className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                  >
                    Mua ngay
                  </a>
                  <a
                    href=""
                    className="group hover:bg-red-500 p-1.5 rounded-[50%]"
                  >
                    <i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
                  </a>
                </div>
              </div>
            </div>
            <div className="item-info-product grid items-center grid-cols-8 mt-2.5 pt-2.5 border-t-[1px] border-neutral-200">
              <div className="info col-span-3">
                <div className="flex items-center">
                  <a
                    href="/buildpc/detail"
                    className="image w-[60px] h-[60px] block border border-neutral-200 p-1 mr-[10px]"
                  >
                    <img
                      src="/assets/images/lienkien-ram.png"
                      width="100%"
                      height="100%"
                      className="block w-full h-full object-contain"
                      alt=""
                    />
                  </a>
                  <a
                    href="/buildpc/detail"
                    className="name-product w-[calc(100%-100px)] hover:text-[var(--color-hover)]"
                  >
                    AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
                  </a>
                </div>
              </div>
              <div className="old-price font-400">4.700.000 Vnđ</div>
              <div className="price-saleoff font-400">20%</div>
              <b className="total-amount">4.000.000đ</b>
              <div className="supplier col-span-2 flex items-center justify-between">
                <a href="">
                  <img
                    src="/assets/images/logo-hacom.png"
                    width="100%"
                    height="100%"
                    className="w-full block h-[30px] object-contain"
                    alt=""
                  />
                </a>
                <div className="btn flex items-center">
                  <a
                    href=""
                    className="px-5 py-2 bg-blue-600 rounded text-white font-bold mr-[10px] hover:bg-blue-800"
                  >
                    Mua ngay
                  </a>
                  <a
                    href=""
                    className="group hover:bg-red-500 p-1.5 rounded-[50%]"
                  >
                    <i className="icon_2025 close group-hover:brightness-0 group-hover:invert-[1]"></i>
                  </a>
                </div>
              </div>
            </div>

            <a
              href="javascript:void(0)"
              onClick={(e) => {
                e.preventDefault();
                setShowPopup(true);
              }}
              className="w-[130px] h-[30px] block text-xs mt-2.5 text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
            >
              + Chọn thêm CPU
            </a>
          </div>
        </div>
        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU Cooler</b>
          <div className="right w-[calc(100%-200px)]">
            <a
              href="javascript:void(0)"
              onClick={(e) => {
                e.preventDefault();
                setShowPopup(true);
              }}
              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
            >
              + Chọn thêm CPU
            </a>
          </div>
        </div>
        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU Cooler</b>
          <div className="right w-[calc(100%-200px)]">
            <a
              href="javascript:void(0)"
              onClick={(e) => {
                e.preventDefault();
                setShowPopup(true);
              }}
              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
            >
              + Chọn thêm CPU
            </a>
          </div>
        </div>
        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU Cooler</b>
          <div className="right w-[calc(100%-200px)]">
            <a
              href="javascript:void(0)"
              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
            >
              + Chọn thêm CPU
            </a>
          </div>
        </div>
        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU Cooler</b>
          <div className="right w-[calc(100%-200px)]">
            <a
              href="javascript:void(0)"
              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
            >
              + Chọn thêm CPU
            </a>
          </div>
        </div>
        <div className="item-component flex items-center py-2.5 border-b-[1px] border-neutral-200">
          <b className="name-component block w-[200px]">CPU Cooler</b>
          <div className="right w-[calc(100%-200px)]">
            <a
              href="javascript:void(0)"
              className="w-[130px] h-[30px] block text-xs text-center leading-[30px] text-black rounded bg-zinc-300 font-bold hover:bg-[var(--color-global)] hover:text-white"
            >
              + Chọn thêm CPU
            </a>
          </div>
        </div>
      </div>
      {/* <!-- list buildpc --> */}

      <div className="box-total-price pt-5">
        <b className="block text-xl text-right text-red-600">
          Tổng tiền 2 sản phẩm: 8.000.000đ
        </b>
        <div className="flex items-center justify-end gap-[10px] mt-3">
          <a
            href="javascript:void(0)"
            className="flex items-center px-7 py-2.5 border border-[#b3b3b3] rounded hover:bg-[#e0e0e0]"
          >
            <i className="icon_2025 print"></i>
            <span className="ml-2">In đơn hàng</span>
          </a>
          <a
            href="javasript:void(0)"
            className="px-7 py-2.5 text-center text-white bg-violet-900 rounded font-bold hover:bg-violet-700"
          >
            Mua hàng tại Hacom
          </a>
        </div>
      </div>
      {/* <!-- tổng tiền  --> */}

      <PopupBuildpc show={showPopup} onClose={() => setShowPopup(false)} />
    </>
  );
}