arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-02-03 02:17:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Create alert components

Browse Source
This commit is contained in:
Freeze455
2021-08-17 15:03:20 +02:00
parent fdaa987e18
commit f490d57073
3 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/AlertInfo.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="rounded-md bg-blue-100 border border-blue-400 w-1/2 p-4">
<div class="flex">
<div class="flex-shrink-0">
<InformationCircleIcon class="h-5 w-5 text-blue-400" aria-hidden="true" />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-blue-800">
<slot name="label" />
</p>
<div class="mt-2 text-sm text-blue-700">
<p>
<slot name="message" />
</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { InformationCircleIcon } from '@heroicons/vue/solid'
</script>

23
src/components/AlertSuccess.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="rounded-md bg-green-50 p-4 border border-green-400 w-1/2">
<div class="flex">
<div class="flex-shrink-0">
<CheckCircleIcon class="h-5 w-5 text-green-400" aria-hidden="true" />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800">
<slot name="label" />
</p>
<div class="mt-2 text-sm text-green-700">
<p>
<slot name="message" />
</p>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { CheckCircleIcon } from '@heroicons/vue/solid'
</script>

4
src/components/AlertWarn.vue
View File

@@ -6,9 +6,9 @@
<ExclamationIcon class="h-5 w-5 text-yellow-400" aria-hidden="true" /> <ExclamationIcon class="h-5 w-5 text-yellow-400" aria-hidden="true" />
</div> </div>
<div class="ml-3"> <div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800"> <p class="text-sm font-medium text-yellow-800">
<slot name="label" /> <slot name="label" />
</h3> </p>
<div class="mt-2 text-sm text-yellow-700"> <div class="mt-2 text-sm text-yellow-700">
<p> <p>
<slot name="message" /> <slot name="message" />