From b3ea60b7fa30107fb51abf3657a2f2d923676abe Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Fri, 27 Feb 2026 18:52:38 +0100
Subject: [PATCH] Add reusable DangerZoneAction component for settings

- Create boxed danger zone component with red-tinted background
- Props: title, description, buttonText
- Consistent styling with border and hover effects
- Mobile-responsive padding and layout
---
 src/components/settings/DangerZoneAction.vue | 72 ++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/components/settings/DangerZoneAction.vue

diff --git a/src/components/settings/DangerZoneAction.vue b/src/components/settings/DangerZoneAction.vue
new file mode 100644
index 0000000..a3afde2
--- /dev/null
+++ b/src/components/settings/DangerZoneAction.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="danger-zone">
+    <h3 class="danger-zone__title">{{ title }}</h3>
+    <p class="danger-zone__description">
+      {{ description }}
+    </p>
+    <button class="danger-zone__button" @click="$emit('action')">
+      {{ buttonText }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface Props {
+    title: string;
+    description: string;
+    buttonText: string;
+  }
+
+  interface Emit {
+    (e: "action"): void;
+  }
+
+  defineProps<Props>();
+  defineEmits<Emit>();
+</script>
+
+<style lang="scss" scoped>
+  @import "scss/variables";
+  @import "scss/media-queries";
+
+  .danger-zone {
+    padding: 1.25rem;
+    background: rgba(220, 48, 35, 0.1);
+    border: 1px solid var(--color-error-highlight);
+    border-radius: 0.5rem;
+
+    @include mobile-only {
+      padding: 1rem;
+    }
+
+    &__title {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--color-error-highlight);
+    }
+
+    &__description {
+      margin: 0 0 1rem 0;
+      font-size: 0.875rem;
+      color: var(--text-color-70);
+      line-height: 1.5;
+    }
+
+    &__button {
+      padding: 0.625rem 1.25rem;
+      background: var(--color-error);
+      color: white;
+      border: 1px solid var(--color-error-highlight);
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background: var(--color-error-highlight);
+      }
+    }
+  }
+</style>