ADD: Pricing charts layout
Finished Pricing Charts
This commit is contained in:
parent
84a295f011
commit
a1a711b015
7 changed files with 300 additions and 97 deletions
23
app/components/Spoiler.vue
Normal file
23
app/components/Spoiler.vue
Normal file
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<details class="Spoiler" :open="open" @click="toggle">
|
||||
<summary><Icon class="icon" :name="`ph:${open ? 'minus' : 'plus'}-circle-duotone`" mode="svg" />{{ header }}</summary>
|
||||
<div>
|
||||
<p v-for="text in content">{{ text }}</p>
|
||||
</div>
|
||||
</details>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Props = {
|
||||
header: string
|
||||
content: string[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const open = ref(false)
|
||||
const toggle = (event) => {
|
||||
event.preventDefault()
|
||||
open.value = !open.value
|
||||
}
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue