import placeholder from "./assets/placeholder.webp";
import placeholderMountains from "./assets/placeholder-mountains.webp";

export default function DemoData() {
  return (
    <>
      <div class="cbb-categories-loop__container">
        <div class="cbb-categories-loop__card">
          <div class="cbb-categories-loop_post-header">
            <p class="cbb-categories-loop_website-title">
              <img
                class="cbb-categories-loop_website-title-icon"
                src={placeholder}
                alt="placeholder"
              />
              My Website
            </p>
          </div>
          <div class="cbb-categories-loop__img-container">
            <a class="cbb-categories-loop__img-link" href="#">
              <img src={placeholderMountains} alt="placeholder" />
              <span class="cbb-categories-loop__post-title">Marketing</span>
            </a>
          </div>
          <div class="cbb-categories-loop__post-info">
            <div class="cbb-categories-loop__category-and-tag">
              <span class="cbb-categories-loop__number-of-publications">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-journals"
                  viewBox="0 0 16 16"
                >
                  <path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2" />
                  <path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0" />
                </svg>
                6 publications
              </span>
            </div>
          </div>
        </div>
        <div class="cbb-categories-loop__card">
          <div class="cbb-categories-loop_post-header">
            <p class="cbb-categories-loop_website-title">
              <img
                class="cbb-categories-loop_website-title-icon"
                src={placeholder}
                alt="placeholder"
              />
              My Website
            </p>
          </div>
          <div class="cbb-categories-loop__img-container">
            <a class="cbb-categories-loop__img-link" href="#">
              <img src={placeholderMountains} alt="placeholder" />
              <span class="cbb-categories-loop__post-title">Web Design</span>
            </a>
          </div>
          <div class="cbb-categories-loop__post-info">
            <div class="cbb-categories-loop__category-and-tag">
              <span class="cbb-categories-loop__number-of-publications">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-journals"
                  viewBox="0 0 16 16"
                >
                  <path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2" />
                  <path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0" />
                </svg>
                4 publications
              </span>
            </div>
          </div>
        </div>
        <div class="cbb-categories-loop__card">
          <div class="cbb-categories-loop_post-header">
            <p class="cbb-categories-loop_website-title">
              <img
                class="cbb-categories-loop_website-title-icon"
                src={placeholder}
                alt="placeholder"
              />
              My Website
            </p>
          </div>
          <div class="cbb-categories-loop__img-container">
            <a class="cbb-categories-loop__img-link" href="#">
              <img src={placeholderMountains} alt="placeholder" />
              <span class="cbb-categories-loop__post-title">
                Graphic Design
              </span>
            </a>
          </div>
          <div class="cbb-categories-loop__post-info">
            <div class="cbb-categories-loop__category-and-tag">
              <span class="cbb-categories-loop__number-of-publications">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-journals"
                  viewBox="0 0 16 16"
                >
                  <path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2" />
                  <path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0" />
                </svg>
                10 publications
              </span>
            </div>
          </div>
        </div>
        <div class="cbb-categories-loop__card">
          <div class="cbb-categories-loop_post-header">
            <p class="cbb-categories-loop_website-title">
              <img
                class="cbb-categories-loop_website-title-icon"
                src={placeholder}
                alt="placeholder"
              />
              My Website
            </p>
          </div>
          <div class="cbb-categories-loop__img-container">
            <a class="cbb-categories-loop__img-link" href="#">
              <img src={placeholderMountains} alt="placeholder" />
              <span class="cbb-categories-loop__post-title">Latest News</span>
            </a>
          </div>
          <div class="cbb-categories-loop__post-info">
            <div class="cbb-categories-loop__category-and-tag">
              <span class="cbb-categories-loop__number-of-publications">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-journals"
                  viewBox="0 0 16 16"
                >
                  <path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2" />
                  <path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0" />
                </svg>
                1 publication
              </span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
