|
|
@ -3,6 +3,7 @@ import { memoServiceClient } from "@/grpcweb";
|
|
|
|
import { useTagStore } from "@/store/module";
|
|
|
|
import { useTagStore } from "@/store/module";
|
|
|
|
import { useMemoStore } from "@/store/v1";
|
|
|
|
import { useMemoStore } from "@/store/v1";
|
|
|
|
import { User } from "@/types/proto/api/v2/user_service";
|
|
|
|
import { User } from "@/types/proto/api/v2/user_service";
|
|
|
|
|
|
|
|
import { useTranslate } from "@/utils/i18n";
|
|
|
|
import Icon from "./Icon";
|
|
|
|
import Icon from "./Icon";
|
|
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
interface Props {
|
|
|
@ -11,6 +12,7 @@ interface Props {
|
|
|
|
|
|
|
|
|
|
|
|
const PersonalStatistics = (props: Props) => {
|
|
|
|
const PersonalStatistics = (props: Props) => {
|
|
|
|
const { user } = props;
|
|
|
|
const { user } = props;
|
|
|
|
|
|
|
|
const t = useTranslate();
|
|
|
|
const tagStore = useTagStore();
|
|
|
|
const tagStore = useTagStore();
|
|
|
|
const memoStore = useMemoStore();
|
|
|
|
const memoStore = useMemoStore();
|
|
|
|
const [memoAmount, setMemoAmount] = useState(0);
|
|
|
|
const [memoAmount, setMemoAmount] = useState(0);
|
|
|
@ -37,25 +39,25 @@ const PersonalStatistics = (props: Props) => {
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
|
|
|
|
<div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
|
|
|
|
<p className="text-sm font-medium">Statistics</p>
|
|
|
|
<p className="text-sm font-medium dark:text-gray-500">{t("common.statistics")}</p>
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
|
|
<div className="w-full flex justify-start items-center">
|
|
|
|
<div className="w-full flex justify-start items-center">
|
|
|
|
<Icon.CalendarDays className="w-4 h-auto mr-1" />
|
|
|
|
<Icon.CalendarDays className="w-4 h-auto mr-1" />
|
|
|
|
<span className="block text-base sm:text-sm">Days</span>
|
|
|
|
<span className="block text-base sm:text-sm">{t("common.days")}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span className="font-mono">{days}</span>
|
|
|
|
<span className="font-mono">{days}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
|
|
<div className="w-full flex justify-start items-center">
|
|
|
|
<div className="w-full flex justify-start items-center">
|
|
|
|
<Icon.Library className="w-4 h-auto mr-1" />
|
|
|
|
<Icon.Library className="w-4 h-auto mr-1" />
|
|
|
|
<span className="block text-base sm:text-sm">Memos</span>
|
|
|
|
<span className="block text-base sm:text-sm">{t("common.memos")}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
|
|
|
|
{isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
|
|
<div className="w-full flex justify-between items-center">
|
|
|
|
<div className="w-full flex justify-start items-center">
|
|
|
|
<div className="w-full flex justify-start items-center">
|
|
|
|
<Icon.Hash className="w-4 h-auto mr-1" />
|
|
|
|
<Icon.Hash className="w-4 h-auto mr-1" />
|
|
|
|
<span className="block text-base sm:text-sm">Tags</span>
|
|
|
|
<span className="block text-base sm:text-sm">{t("common.tags")}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span className="font-mono">{tags}</span>
|
|
|
|
<span className="font-mono">{tags}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|