mirror of
https://github.com/web3privacy/explorer-app.git
synced 2024-10-15 16:46:26 +02:00
36 lines
1 KiB
Vue
36 lines
1 KiB
Vue
<script lang="ts" setup>
|
|
import type { ProjectShallow } from '~/types'
|
|
|
|
const props = defineProps<{
|
|
projects: ProjectShallow[]
|
|
}>()
|
|
const { switcher } = storeToRefs(useData())
|
|
|
|
const displayCount = ref(100)
|
|
const displayedProjects = computed(() => props.projects.slice(0, displayCount.value))
|
|
function showMoreProjects() {
|
|
displayCount.value += 50
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div flex flex-col items-start>
|
|
<div v-if="displayedProjects.length" grid :class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'" gap-16px text-white w-full>
|
|
<Card
|
|
v-for="project in displayedProjects"
|
|
:key="project.id" :project="project"
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<h3>No Projects found...</h3>
|
|
</div>
|
|
<button
|
|
v-if="displayedProjects.length < projects.length"
|
|
mt-29px text="14px" leading-24px font-700 px-12px
|
|
py-4px border-2px border-app-white
|
|
@click="showMoreProjects"
|
|
>
|
|
Load more projects
|
|
</button>
|
|
</div>
|
|
</template>
|