From cff6c54b52311c3bbf01040c2c2d57f2a23086fe Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Wed, 6 Sep 2023 00:06:04 +0800
Subject: [PATCH] chore: add beta badge component

---
 frontend/web/src/components/BetaBadge.tsx             |  9 +++++++++
 .../web/src/components/setting/PreferenceSection.tsx  | 11 +++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 frontend/web/src/components/BetaBadge.tsx

diff --git a/frontend/web/src/components/BetaBadge.tsx b/frontend/web/src/components/BetaBadge.tsx
new file mode 100644
index 0000000..babef78
--- /dev/null
+++ b/frontend/web/src/components/BetaBadge.tsx
@@ -0,0 +1,9 @@
+const BetaBadge = () => {
+  return (
+    <div className="text-xs border px-1 text-gray-500 bg-gray-100 rounded-full">
+      <span>Beta</span>
+    </div>
+  );
+};
+
+export default BetaBadge;
diff --git a/frontend/web/src/components/setting/PreferenceSection.tsx b/frontend/web/src/components/setting/PreferenceSection.tsx
index cdd2dc2..077d990 100644
--- a/frontend/web/src/components/setting/PreferenceSection.tsx
+++ b/frontend/web/src/components/setting/PreferenceSection.tsx
@@ -2,6 +2,7 @@ import { Option, Select } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { UserSetting, UserSetting_ColorTheme, UserSetting_Locale } from "@/types/proto/api/v2/user_setting_service_pb";
 import useUserStore from "../../stores/v1/user";
+import BetaBadge from "../BetaBadge";
 
 const PreferenceSection: React.FC = () => {
   const { t } = useTranslation();
@@ -65,7 +66,10 @@ const PreferenceSection: React.FC = () => {
       <div className="w-full flex flex-col justify-start items-start gap-y-2">
         <p className="text-base font-semibold leading-6 text-gray-900">Preference</p>
         <div className="w-full flex flex-row justify-between items-center">
-          <span>{t("common.language")}</span>
+          <div className="flex flex-row justify-start items-center gap-x-1">
+            <span>{t("common.language")}</span>
+            <BetaBadge />
+          </div>
           <Select defaultValue={language} onChange={(_, value) => handleSelectLanguage(value as UserSetting_Locale)}>
             {languageOptions.map((option) => {
               return (
@@ -77,7 +81,10 @@ const PreferenceSection: React.FC = () => {
           </Select>
         </div>
         <div className="w-full flex flex-row justify-between items-center">
-          <span>Color Theme</span>
+          <div className="flex flex-row justify-start items-center gap-x-1">
+            <span>Color Theme</span>
+            <BetaBadge />
+          </div>
           <Select defaultValue={colorTheme} onChange={(_, value) => handleSelectColorTheme(value as UserSetting_ColorTheme)}>
             {colorThemeOptions.map((option) => {
               return (