library_components/app.vue

<template>
  <div class="flex flex-col gap-10 bg-white dark:bg-BgDarkSecond p-10">
    <div
      class="flex items-center justify-center gap-20 relative w-[1200px] mx-auto"
    >
      <!-- MlButton: This button can be used for various actions like form submissions or dialog openings. Customize its appearance using the :pt prop. -->
      <MlButton
        :pt="{
          root: { class: '' },
          outer: { class: 'bg-gradient-to-r from-red-600 to-accent2' },
          inner: { class: 'dark:bg-gradient-to-r bg-white' },
        }"
      >
        Let's talk
      </MlButton>

      <!-- MlPaginator: Handles item pagination. Customize the appearance and behavior via props. Listens to changes with @update:paginatedItems to manage displayed items. -->
      <MlPaginator
        :items="items"
        :items-per-page="2"
        :max-pages-shown="2"
        @update:paginatedItems="handlePaginatedItems"
        v-model="currentPage"
        :pt="{
          root: {
            class:
              'flex space-x-1 bg-white/85 dark:bg-BgDark/85 shadow-custom-lrb items-center px-3 py-2 rounded-full dark:text-white',
          },
          paginator: { class: 'bg-red-500' },
          activePaginator: { class: 'bg-accent2 dark:bg-accent1' },
        }"
      />

      <!-- MlDropDown: A customizable dropdown menu component for selecting options. 
       Use the :pt prop to define styles for the root, dropdown, title, and arrow sections.
       The dropdown supports multiple items which can be styled individually using the :pt prop for each MlDropDownItem. -->

      <MlDropDown
        title="Dropdown"
        :title="''"
        :pt="{
          root: { class: 'w-10 h-10 text-left absolute left-0 z-0' },
          dropdown: {
            class:
              'w-[150px] right-[-50px] absolute mt-4 shadow-custom-lrb dark:shadow-custom-drb block',
          },
          title: { class: 'w-[30px] h-10' },
          arrow: { class: 'hidden' },
        }"
      >
        <!-- Each MlDropDownItem represents an option in the dropdown menu. Style each item and define click behavior for interactivity. -->
        <MlDropDownItem :pt="{ root: { class: 'block px-1 py-3' } }">
          <span
            class="w-full cursor-pointer font-medium flex items-center justify-center"
            >English</span
          >
        </MlDropDownItem>
        <MlDropDownItem :pt="{ root: { class: 'block px-1 py-3' } }">
          <span
            class="w-full cursor-pointer font-medium flex items-center justify-center"
            >Polis</span
          >
        </MlDropDownItem>
      </MlDropDown>

      <!-- MlThemeSwitch: A button for toggling between light and dark themes. Does not require additional props for basic functionality. -->
      <MlThemeSwitch />
    </div>

    <!-- MlSlider: Displays a series of items as a slider. Use the :pt prop to style it and the default slot to customize the content of each slide. -->
    <MlSlider
      :items="items"
      :direction="'horizontal'"
      :pt="{
        root: { class: '' },
        slider: { class: '' },
        counter: { class: '' },
      }"
      class="my-[50px] relative z-30"
    >
      <template #default="{ item }">
        <div
          class="bg-white/85 dark:bg-BgDark/85 backdrop-blur-md mx-auto my-4 rounded-3xl w-80 md:w-[800px] shadow-custom-lrb text-black dark:text-white"
        >
          <div class="flex justify-between items-center px-8 py-2 border-b-2">
            <p class="font-semibold text-[12px] uppercase tracking-widest">
              {{ item.title }}
            </p>
            <div
              class="bg-BgDark dark:bg-BgLight rounded-lg w-5 h-0.5 cursor-pointer"
            ></div>
          </div>
          <div
            class="flex md:flex-row-reverse flex-col gap-8 py-12 md:py-8 md:w-[800px]"
          >
            <div class="flex justify-center w-full">
              <!-- Placeholder for image content -->
            </div>
            <div class="flex flex-col gap-4 mx-8">
              <h1 class="font-bold text-2xl md:text-[32px]">
                {{ item.title }}
              </h1>
              <p class="font-ibm text-lg">
                {{ item.info }}
              </p>
            </div>
          </div>
        </div>
      </template>
    </MlSlider>

    <!-- MlSliderPoint: Similar to MlSlider but intended for full-page content viewing. Customize its layout and appearance using the :pt prop and slots. -->
    <div class="flex w-full justify-center text-black dark:text-white">
      <MlSliderPoint
        :direction="direction"
        :pt="{
          root: {
            class:
              'px-5 w-full flex items-center justify-center flex-col md:max-w-[1200px] lg:flex-row md:justify-between md:gap-20 lg:gap-0',
          },
          slider: { class: 'w-full h-full md:max-h-[470px]' },
          counter: { class: 'lg:rotate-90 z-10 w-[220px] md:w-[280px]' },
        }"
      >
        <div
          class="opacity-90 mx-auto rounded-3xl w-80 md:max-w-[800px] md:w-full h-full"
        >
          <div
            class="flex md:flex-row flex-col items-center gap-8 py-12 md:py-0 w-full h-full"
          >
            <div class="w-full">
              <!-- Placeholder for image content -->
            </div>
            <div class="flex flex-col gap-4 mb-4">
              <h1 class="font-bold text-2xl md:text-[32px]">YourGold.cz</h1>
              <div class="flex items-center gap-2 font-ibm">
                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
                  Tag one
                </p>
                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
                  Tag two
                </p>
                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
                  Tag three
                </p>
              </div>
              <p class="font-ibm text-[16px]">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Suspendisse varius enim in eros elementum tristique. Duis
                cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
                commodo diam libero vitae erat.
              </p>
            </div>
          </div>
        </div>
      </MlSliderPoint>
    </div>

    <!-- Tabber Component: Use this for tabbed data display. Bind the tabs data structure to manage different tab content dynamically. -->
    <div
      class="max-w-[1200px] mx-auto border-[1.5px] border-gray-400 rounded-2xl text-black dark:text-white"
    >
      <MlTabberBase :tabs="tabs" />
    </div>
  </div>
</template>

<script setup>
// Setup script for handling paginator and tab data.
const currentItems = ref([]);
const currentPage = ref(1);
const handlePaginatedItems = (items) => {
  currentItems.value = items;
};
// Array of items to be displayed and managed by MlPaginator.
const items = [
  {
    id: 1,
    title:
      "How to enforce conventional commits using git-cliff with a CI pipeline?",
    date: "01.07.2024",
    persone1: "Natalia Goc",
    persone2: "Marek Goc",
    info: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  },
  {
    id: 2,
    title: "Understanding JavaScript Promises",
    date: "02.07.2024",
    persone1: "John Doe",
    persone2: "Jane Smith",
    info: "JavaScript promises are used to handle asynchronous operations. They provide an alternative approach to callbacks by returning a value in the future.",
  },
  {
    id: 3,
    title: "An Introduction to WebAssembly",
    date: "03.07.2024",
    persone1: "Alice Johnson",
    persone2: "Bob Brown",
    info: "WebAssembly is a binary instruction format for a stack-based virtual machine, designed as a portable target for compilation of high-level languages like C, C++, and Rust.",
  },
  {
    id: 4,
    title: "Building Responsive Web Applications",
    date: "04.07.2024",
    persone1: "Emily White",
    persone2: "Chris Green",
    info: "Responsive web design ensures that web applications work well on a variety of devices, providing an optimal user experience across different screen sizes.",
  },
  {
    id: 5,
    title: "Exploring the Basics of Machine Learning",
    date: "05.07.2024",
    persone1: "Michael Lee",
    persone2: "Sara Kim",
    info: "Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to learn from data.",
  },
  {
    id: 6,
    title: "Getting Started with Docker",
    date: "06.07.2024",
    persone1: "David Brown",
    persone2: "Laura Black",
    info: "Docker is a tool designed to make it easier to create, deploy, and run applications by using containers, which allow a developer to package up an application with all of its parts.",
  },
  {
    id: 7,
    title: "Introduction to Kubernetes",
    date: "07.07.2024",
    persone1: "James Wilson",
    persone2: "Olivia Martin",
    info: "Kubernetes is an open-source platform designed to automate deploying, scaling, and operating application containers, providing a framework to run distributed systems resiliently.",
  },
];

// Array of tabber to be displayed and managed by MlTabberBase.
const tabs = [
  {
    header: "Web App Development",
    content: {
      title: "Web App Development",
      info: "From simple business portfolios to complex interactive web applications, we can realize almost any service available through the Web. We will take care of the aesthetics, accessibility, stability and performance of your web application.",
    },
  },
  {
    header: "E-commerce",
    content: {
      title: "Mobile App Development",
      info: "E-commerce services have became a fundamental element of many well prospering businesses. Having our own experience with it we will be able to help you with the high expectations of your online customers.",
    },
  },
  {
    header: "Business Management and ERP Systems",
    content: {
      title: "Digital Marketing",
      info: "Well designed IT infrastructure can be a key element in your company’s success. With us you will discover how modern software can help you manage your business.",
    },
  },
  {
    header: "Hosting and IT Infrastructure",
    content: {
      title: "Web App Development",
      info: "We are ready to fill any gaps in your infrastructure. Working with us you won’t have to worry about managing complex costs or hardware resources.",
    },
  },
  {
    header: "IT Consulting",
    content: {
      title: "IT Consulting",
      info: "We are happy to share our experiences with other companies. Besides free consulting during project cost evaluation we offer our knowledge as an independent and affordable service.",
    },
  },
];
</script>