aboutsummaryrefslogtreecommitdiff
path: root/src/components/IconButton.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/IconButton.vue')
-rw-r--r--src/components/IconButton.vue23
1 files changed, 23 insertions, 0 deletions
diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
new file mode 100644
index 0000000..9357e97
--- /dev/null
+++ b/src/components/IconButton.vue
@@ -0,0 +1,23 @@
+<template>
+<div :style="styles" class="p-2 rounded-full hover:cursor-pointer"
+ :class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
+ <slot class="w-full h-full">?</slot>
+</div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+
+const props = defineProps({
+ size: {type: Number, default: 36},
+ disabled: {type: Boolean, default: false},
+});
+
+const styles = computed(() => ({
+ minWidth: props.size + 'px',
+ maxWidth: props.size + 'px',
+ minHeight: props.size + 'px',
+ maxHeight: props.size + 'px',
+ padding: (props.size / 5) + 'px',
+}));
+</script>