-
-
Notifications
You must be signed in to change notification settings - Fork 660
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(web): add template category constant & add language and colo…
…r to statusbar (#1435)
- Loading branch information
1 parent
5c9bb33
commit 01f45a2
Showing
18 changed files
with
309 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { MoonIcon, SunIcon } from "@chakra-ui/icons"; | ||
| import { useColorMode } from "@chakra-ui/react"; | ||
| import clsx from "clsx"; | ||
|
|
||
| import { COLOR_MODE } from "@/constants"; | ||
|
|
||
| export default function ColorModeSwitch(props: { className?: string; boxSize?: number }) { | ||
| const { toggleColorMode } = useColorMode(); | ||
| const { className, boxSize = 4 } = props; | ||
| const darkMode = useColorMode().colorMode === COLOR_MODE.dark; | ||
|
|
||
| return ( | ||
| <div | ||
| className={clsx("flex cursor-pointer items-center", className)} | ||
| onClick={() => { | ||
| toggleColorMode(); | ||
| window.dispatchEvent(new Event("ColorModeChange")); | ||
| }} | ||
| > | ||
| {darkMode ? <MoonIcon boxSize={boxSize} /> : <SunIcon boxSize={boxSize} />} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { useTranslation } from "react-i18next"; | ||
| import { Button } from "@chakra-ui/react"; | ||
| import clsx from "clsx"; | ||
|
|
||
| import { LangIcon } from "@/components/CommonIcon"; | ||
|
|
||
| const LanguageSwitch = (props: { className?: string }) => { | ||
| const { i18n, t } = useTranslation(); | ||
| const { className } = props; | ||
|
|
||
| return ( | ||
| <Button | ||
| className={clsx("!px-0 !font-normal", className)} | ||
| onClick={(event) => { | ||
| event?.preventDefault(); | ||
| i18n.changeLanguage(i18n.language === "en" ? "zh" : "en"); | ||
| }} | ||
| variant="none" | ||
| > | ||
| <LangIcon className={clsx("mr-1", className)} /> | ||
| <p>{t("i18n tip")}</p> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default LanguageSwitch; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React from "react"; | ||
| import { | ||
| Area, | ||
| AreaChart, | ||
| CartesianGrid, | ||
| ResponsiveContainer, | ||
| Tooltip, | ||
| XAxis, | ||
| YAxis, | ||
| } from "recharts"; | ||
|
|
||
| export default function AreaCard(props: { | ||
| data: any[]; | ||
| strokeColor: string; | ||
| fillColor: string; | ||
| title: string; | ||
| }) { | ||
| const { data, strokeColor, fillColor, title } = props; | ||
|
|
||
| return ( | ||
| <div className="h-[180px] w-1/2 rounded-xl border border-grayModern-200 bg-[#F8FAFB] p-4"> | ||
| <div className="mb-3 font-medium text-grayModern-900">{title}</div> | ||
| <ResponsiveContainer width="100%" height="90%"> | ||
| <AreaChart data={data} margin={{ left: -30 }}> | ||
| <CartesianGrid strokeDasharray="3 3" vertical={false} /> | ||
| <XAxis dataKey="name" axisLine={false} tickLine={false} fontSize="10" /> | ||
| <YAxis axisLine={false} tickLine={false} fontSize="10" /> | ||
| <Tooltip | ||
| // formatter={} | ||
| /> | ||
| <Area | ||
| type="monotone" | ||
| dataKey="uv" | ||
| stroke={strokeColor} | ||
| fill={fillColor} | ||
| strokeWidth={2} | ||
| /> | ||
| </AreaChart> | ||
| </ResponsiveContainer> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"; | ||
|
|
||
| export default function PieCard(props: { data: any[]; title: string; colors: string[] }) { | ||
| const { data, title, colors } = props; | ||
|
|
||
| return ( | ||
| <div className="h-[180px] w-1/2 rounded-xl border border-grayModern-200 bg-[#F8FAFB] p-4"> | ||
| <div className="font-medium text-grayModern-900">{title}</div> | ||
| <ResponsiveContainer width="100%" height="90%"> | ||
| <PieChart> | ||
| <Tooltip /> | ||
| <Pie | ||
| data={data} | ||
| cx="50%" | ||
| innerRadius={50} | ||
| outerRadius={60} | ||
| startAngle={90} | ||
| endAngle={-270} | ||
| legendType="circle" | ||
| dataKey="value" | ||
| > | ||
| {data.map((entry, index) => ( | ||
| <Cell key={`cell-${index}`} fill={colors[index]} /> | ||
| ))} | ||
| </Pie> | ||
| <text | ||
| x="40%" | ||
| y="50%" | ||
| textAnchor="middle" | ||
| dominantBaseline="middle" | ||
| style={{ fontSize: "24px", fontWeight: "bold" }} | ||
| > | ||
| 66% | ||
| </text> | ||
| <Legend align="right" verticalAlign="middle" layout="vertical" /> | ||
| </PieChart> | ||
| </ResponsiveContainer> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.