91 lines
3.4 KiB
Vue
91 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<MlButton
|
|
:pt="{
|
|
root: { class: '' },
|
|
outer: { class: 'bg-gradient-to-r from-green-300 to-red-400' },
|
|
inner: { class: 'dark:bg-gradient-to-r bg-white' },
|
|
}"
|
|
>
|
|
Let's talk
|
|
</MlButton>
|
|
|
|
<h1 class="text-3xl bg-black text-white">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt,
|
|
laborum.
|
|
</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const currentItems = ref([]);
|
|
const currentPage = ref(1);
|
|
|
|
const handlePaginatedItems = (items) => {
|
|
currentItems.value = items;
|
|
};
|
|
|
|
const items = [
|
|
{
|
|
id: 1,
|
|
title: "YourGold.cz",
|
|
href: "YourGold.cz",
|
|
text: "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: "Web App Development",
|
|
href: "Web App Development",
|
|
text: "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: 3,
|
|
title: "E-commerce",
|
|
href: "E-commerce",
|
|
text: "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: 4,
|
|
title: "Hosting",
|
|
href: "Hosting",
|
|
text: "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: 5,
|
|
title: "Development",
|
|
href: "YourGol",
|
|
text: "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: 6,
|
|
title: "New Title 1",
|
|
href: "new-href-1",
|
|
text: "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: 7,
|
|
title: "New Title 2",
|
|
href: "new-href-2",
|
|
text: "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: 8,
|
|
title: "New Title 3",
|
|
href: "new-href-3",
|
|
text: "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: 9,
|
|
title: "New Title 4",
|
|
href: "new-href-4",
|
|
text: "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: 10,
|
|
title: "New Title 5",
|
|
href: "new-href-5",
|
|
text: "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",
|
|
},
|
|
];
|
|
</script>
|