aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-21 14:19:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add beta badge component

Browse Source
This commit is contained in:
steven 2023-09-06 00:06:04 +08:00
parent 5e6190b181
commit cff6c54b52
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/web/src/components/BetaBadge.tsx Normal file
View File

@ -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;

7
frontend/web/src/components/setting/PreferenceSection.tsx
View File

@ -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">
<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">
<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 (