mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-29 11:20:36 +01:00
docs: landing page (#611)
Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
99
docs/components/home/HomeDemo.vue
Normal file
99
docs/components/home/HomeDemo.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<Transition appear name="fade">
|
||||
<ULandingGrid class="lg:grid-cols-10 lg:gap-8">
|
||||
<div class="col-span-8 flex items-center">
|
||||
<RangeExample />
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 row-span-2 flex items-center">
|
||||
<RadioExample />
|
||||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
<DropdownExampleBasic :popper="{ placement: 'bottom-start', strategy: 'absolute' }" />
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 flex flex-wrap items-center justify-between gap-1">
|
||||
<UAvatarGroup :max="2">
|
||||
<UAvatar
|
||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac"
|
||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/benjamincanac 2x"
|
||||
alt="benjamincanac"
|
||||
/>
|
||||
<UAvatar
|
||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
|
||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/Atinux 2x"
|
||||
alt="Atinux"
|
||||
/>
|
||||
<UAvatar
|
||||
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
|
||||
srcset="https://ipx.nuxt.com/s_64x64/gh_avatar/smarroufin 2x"
|
||||
alt="smarroufin"
|
||||
/>
|
||||
</UAvatarGroup>
|
||||
|
||||
<UButton label="Button" icon="i-heroicons-pencil-square" />
|
||||
|
||||
<UBadge label="Badge" />
|
||||
|
||||
<UColorModeToggle />
|
||||
|
||||
<PaginationExampleBasic />
|
||||
</div>
|
||||
|
||||
<div class="col-span-3 row-span-8 gap-6 flex flex-col justify-between">
|
||||
<UNotification :id="1" title="Notification" description="This is a notification!" icon="i-heroicons-command-line" />
|
||||
|
||||
<TabsExampleItemCustomSlot />
|
||||
|
||||
<UCard class="flex-shrink-0">
|
||||
<div class="flex items-center gap-4 justify-center">
|
||||
<USkeleton class="h-14 w-14 flex-shrink-0" :ui="{ rounded: 'rounded-full' }" />
|
||||
<div class="space-y-3 flex-1">
|
||||
<USkeleton class="h-4 w-full" />
|
||||
<USkeleton class="h-4 w-2/3" />
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="col-span-5 row-span-2 flex flex-col">
|
||||
<UCard :ui="{ body: { base: 'flex-1 flex flex-col overflow-y-auto', padding: '' } }" class="col-span-4 row-span-6 flex-1 flex flex-col">
|
||||
<CommandPaletteExampleGroups />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 row-span-2 gap-6 flex flex-col">
|
||||
<CheckboxExample />
|
||||
|
||||
<InputExampleClearable />
|
||||
|
||||
<UFormGroup label="Labels">
|
||||
<SelectMenuExampleCreatable />
|
||||
</UFormGroup>
|
||||
|
||||
<UCard :ui="{ body: { padding: '!p-1' } }">
|
||||
<VerticalNavigationExampleAvatarSlot />
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="col-span-7 row-span-6">
|
||||
<UCard :ui="{ body: { padding: '' } }">
|
||||
<TableExampleClickable :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }" />
|
||||
</UCard>
|
||||
</div>
|
||||
</ULandingGrid>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
108
docs/components/home/HomeTetris.vue
Normal file
108
docs/components/home/HomeTetris.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<Transition appear name="fade">
|
||||
<div
|
||||
:style="{
|
||||
'--cell': `${width / cols}px`,
|
||||
'--rows': rows - 1
|
||||
}"
|
||||
>
|
||||
<div
|
||||
ref="el"
|
||||
class="absolute inset-0 grid justify-center auto-rows-[var(--cell)] -space-y-px"
|
||||
>
|
||||
<div v-for="(row, rowIndex) in grid" :key="rowIndex" class="grid grid-flow-col auto-cols-[--cell] flex-1 -space-x-px">
|
||||
<div v-for="(cell, cellIndex) in row" :key="cellIndex" class="transition-[background] duration-1000 border border-primary-200/50 dark:border-primary-900/25 bg-opacity-10 hover:bg-opacity-20 dark:bg-opacity-5 dark:hover:bg-opacity-10" :class="[cell && `bg-primary-500 dark:bg-primary-400 cursor-pointer`]" @click="removeCell(rowIndex, cellIndex)" />
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[calc((var(--cell)*var(--rows))+1px)] inset-x-0 h-[calc(var(--cell)*2)] bg-gradient-to-t from-white dark:from-gray-900" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
|
||||
const el = ref(null)
|
||||
const grid = ref([])
|
||||
const rows = ref(0)
|
||||
const cols = ref(0)
|
||||
|
||||
const colors = useAppConfig()?.ui.colors
|
||||
const { width, height } = useElementSize(el)
|
||||
|
||||
function getRandomColor () {
|
||||
return colors[Math.floor(Math.random() * (colors.length - 1))]
|
||||
}
|
||||
|
||||
function createGrid () {
|
||||
grid.value = []
|
||||
|
||||
for (let i = 0; i <= rows.value; i++) {
|
||||
grid.value.push(new Array(cols.value).fill(null))
|
||||
}
|
||||
}
|
||||
|
||||
function createNewCell () {
|
||||
const color = getRandomColor()
|
||||
const x = Math.floor(Math.random() * cols.value)
|
||||
|
||||
grid.value[0][x] = color
|
||||
}
|
||||
|
||||
function moveCellsDown () {
|
||||
for (let row = rows.value - 1; row >= 0; row--) {
|
||||
for (let col = 0; col < cols.value; col++) {
|
||||
if (grid.value[row][col] !== null && grid.value[row + 1][col] === null) {
|
||||
grid.value[row + 1][col] = grid.value[row][col]
|
||||
grid.value[row][col] = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (grid.value[rows.value].every(cell => cell !== null)) {
|
||||
for (let col = 0; col < cols.value; col++) {
|
||||
grid.value[rows.value][col] = null
|
||||
}
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function removeCell (row, col) {
|
||||
grid.value[row][col] = null
|
||||
}
|
||||
|
||||
function calcGrid () {
|
||||
const base = Math.ceil(width.value / 60)
|
||||
const cell = width.value / base
|
||||
|
||||
rows.value = Math.ceil(height.value / cell)
|
||||
cols.value = width.value / cell
|
||||
|
||||
createGrid()
|
||||
}
|
||||
|
||||
watch(width, calcGrid)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(calcGrid, 50)
|
||||
|
||||
setInterval(() => {
|
||||
moveCellsDown()
|
||||
createNewCell()
|
||||
}, 1000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user