feat: use alert box to show notes

Renovamen · Jul 5, 2024 · 5c6f0c6 · 5c6f0c6
1 parent 8b5e168
commit 5c6f0c6
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 20 deletions.
diff --git a/site/src/components/editor/toolbar/CorrectCase.vue b/site/src/components/editor/toolbar/CorrectCase.vue
@@ -2,19 +2,27 @@
   <EditorToolbarBox
     :text="$t('toolbar.correct_case.title')"
     icon="i-icon-park-outline:check-correct"
-    class="text-right"
   >
-    <div
-      p="y-2 x-3"
-      bg="background lg:accent"
-      class="rounded text-left"
-      v-html="$t('toolbar.correct_case.desc')"
-    />
+    <UiAlert>
+      <UiAlertTitle>{{ $t("toolbar.correct_case.example.title") }}</UiAlertTitle>
+      <UiAlertDescription>
+        {{ $t("toolbar.correct_case.example.desc") }}
+      </UiAlertDescription>
+    </UiAlert>
 
-    <UiButton @click="correct" size="sm" class="mt-3">
-      <span i-carbon:rocket mr-1 />
-      {{ $t("toolbar.correct_case.btn") }}
-    </UiButton>
+    <UiAlert variant="info" class="mt-3">
+      <UiAlertTitle>{{ $t("toolbar.correct_case.note.title") }}</UiAlertTitle>
+      <UiAlertDescription>
+        {{ $t("toolbar.correct_case.note.desc") }}
+      </UiAlertDescription>
+    </UiAlert>
+
+    <div class="mt-3 text-right">
+      <UiButton @click="correct" size="sm">
+        <span i-carbon:rocket mr-1 />
+        {{ $t("toolbar.correct_case.btn") }}
+      </UiButton>
+    </div>
   </EditorToolbarBox>
 </template>
 

diff --git a/site/src/components/ui/alert/Alert.vue b/site/src/components/ui/alert/Alert.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { type AlertVariants, alertVariants } from ".";
+import { cn } from "~/utils/shadcn";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+  variant?: AlertVariants["variant"];
+}>();
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/site/src/components/ui/alert/AlertDescription.vue b/site/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/utils/shadcn";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/site/src/components/ui/alert/AlertTitle.vue b/site/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/utils/shadcn";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-bold leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/site/src/components/ui/alert/index.ts b/site/src/components/ui/alert/index.ts
@@ -0,0 +1,26 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Alert } from "./Alert.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+
+export const alertVariants = cva(
+  "relative w-full rounded-md border p-3 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-accent/30 text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        success:
+          "border-success/60 bg-success/5 [&>svg]:text-success [&>h5]:text-success",
+        info: "border-info/60 bg-info/5 [&>svg]:text-info [&>h5]:text-info"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
diff --git a/site/src/components/ui/sonner/Sonner.vue b/site/src/components/ui/sonner/Sonner.vue
@@ -16,11 +16,9 @@ const props = defineProps<ToasterProps>();
         cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         closeButton:
           'group-[.toast]:bg-background group-[.toast]:text-muted-foreground group-[.toaster]:border-border hover:(bg-background! text-foreground! border-foreground!)',
-        error:
-          'group-[.toaster]:text-destructive group-[.toaster]:border-destructive dark:group-[.toaster]:text-red-500',
-        success:
-          'group-[.toaster]:text-green-700 group-[.toaster]:border-green-700 dark:(group-[.toaster]:text-green-500 group-[.toaster]:border-green-600)',
-        info: 'group-[.toaster]:text-blue-700 group-[.toaster]:border-blue-700 dark:(group-[.toaster]:text-sky-500 group-[.toaster]:border-sky-600)'
+        error: 'group-[.toaster]:text-destructive group-[.toaster]:border-destructive',
+        success: 'group-[.toaster]:text-success group-[.toaster]:border-success',
+        info: 'group-[.toaster]:text-info group-[.toaster]:border-info'
       }
     }"
   />

diff --git a/site/src/composables/toast.ts b/site/src/composables/toast.ts
@@ -15,7 +15,9 @@ export const useToast = () => {
   };
 
   const onDelete = (msg: string) => {
-    toast.error(t("notification.delete", { msg }));
+    toast.error(t("notification.delete", { msg }), {
+      duration: 50000
+    });
   };
 
   const onNew = () => {

diff --git a/site/src/i18n/en.yaml b/site/src/i18n/en.yaml
@@ -45,7 +45,14 @@ toolbar:
     export_md: Export Markdown
   correct_case:
     title: Correct Case
-    desc: "Example: \"Github\" → \"GitHub\" <br> Note: Words that are only in uppercase or lowercase (\"GITHUB\" or \"github\") will be left untouched."
+    example:
+      title: Example
+      desc: |
+        "Github" → "GitHub"
+    note:
+      title: Note
+      desc: |
+        Words that are only in uppercase or lowercase ("GITHUB" or "github") will be left untouched.
     btn : Correct it!
   paper_size: Paper Size
   theme_color: Theme Color

diff --git a/site/src/i18n/sp.yaml b/site/src/i18n/sp.yaml
@@ -42,7 +42,14 @@ toolbar:
     export_md: Exportar Markdown
   correct_case:
     title: Corregir Mayusculas
-    desc: "Ejemplo: \"Github\" → \"GitHub\" <br> Nota: No se modificarán las palabras que sólo contengan mayúsculas o minúsculas (\"GITHUB\" or \"github\")"
+    example:
+      title: Ejemplo
+      desc: |
+        "Github" → "GitHub"
+    note:
+      title: Nota
+      desc: |
+        No se modificarán las palabras que sólo contengan mayúsculas o minúsculas ("GITHUB" or "github").
     btn : Corrígelo!
   paper_size: Tamaño de hoja
   theme_color: Color y tema

diff --git a/site/src/i18n/zh-cn.yaml b/site/src/i18n/zh-cn.yaml
@@ -45,7 +45,14 @@ toolbar:
     export_md: 导出为 Markdown
   correct_case:
     title: 专有名词大小写修正
-    desc: "例如：\"Github\" → \"GitHub\" <br> 注意：不会修正全为大写或小写字母的单词（如 \"GITHUB\" 或 \"github\"）"
+    example:
+      title: 例子
+      desc: |
+        "Github" → "GitHub"
+    note:
+      title: 注意
+      desc: |
+        不会修正全为大写或小写字母的单词（如 "GITHUB" 或 "github"）。
     btn : 修正
   paper_size: 纸张尺寸
   theme_color: 主题色

diff --git a/site/unocss.config.ts b/site/unocss.config.ts
@@ -24,11 +24,30 @@ export default defineConfig({
         "relative mx-auto rounded-md duration-150 hover:(-translate-y-3 drop-shadow-xl)"
     }
   ],
+  preflights: [
+    {
+      getCSS: () => `
+        :root {
+          --success: 142 71% 29%;
+          --info: 224 77% 48%;
+        }
+
+        .dark {
+          --success: 142 76% 40%;
+          --info: 209 87% 57%;
+        }
+      `
+    }
+  ],
   theme: {
     breakpoints: {
       sm: "641px",
       md: "769px",
       lg: "1025px"
+    },
+    colors: {
+      success: "hsl(var(--success))",
+      info: "hsl(var(--info))"
     }
   },
   presets: [