Dashboard Redesign (#48)

* feat: add user_template setting

* style: header

* style: page padding

* style: header

* feat: header now time

* style: login page

* feat: nav indicator

* style: button inset shadow

* style: footer text size

* feat: header show login_ip

* fix: error toast

* fix: frontend_templates setting

* fix: lint

* feat: pr auto format

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: hamster1963 <hamster1963@users.noreply.github.com>
This commit is contained in:
仓鼠
2024-12-13 23:51:33 +08:00
committed by GitHub
parent b04ef1bb72
commit 8c8d3e3057
132 changed files with 13242 additions and 12878 deletions

View File

@@ -1,40 +1,45 @@
import { ProfileCard } from "@/components/profile"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useMainStore } from "@/hooks/useMainStore"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { useMediaQuery } from "@/hooks/useMediaQuery";
import { Server, Boxes } from "lucide-react";
import { useServer } from "@/hooks/useServer";
import { ProfileCard } from "@/components/profile";
import { useMediaQuery } from "@/hooks/useMediaQuery"
import { useServer } from "@/hooks/useServer"
import { Boxes, Server } from "lucide-react"
export default function ProfilePage() {
const { profile } = useMainStore();
const { servers, serverGroups } = useServer();
const { profile } = useMainStore()
const { servers, serverGroups } = useServer()
const isDesktop = useMediaQuery("(min-width: 890px)")
return (
profile && (
<div className={`flex p-8 gap-4 ${isDesktop ? 'ml-6' : 'flex-col'}`}>
<div className={`flex ${isDesktop ? 'flex-col mr-6' : 'gap-4 w-full items-center'}`}>
<Avatar className={`${isDesktop ? 'h-[300px] w-[300px]' : 'h-[150px] w-[150px]'} border-foreground border-[1px]`}>
<AvatarImage src={'https://api.dicebear.com/7.x/notionists/svg?seed=' + profile.username} alt={profile.username} />
<div className={`flex p-8 gap-4 ${isDesktop ? "ml-6" : "flex-col"}`}>
<div
className={`flex ${isDesktop ? "flex-col mr-6" : "gap-4 w-full items-center"}`}
>
<Avatar
className={`${isDesktop ? "h-[300px] w-[300px]" : "h-[150px] w-[150px]"} border-foreground border-[1px]`}
>
<AvatarImage
src={
"https://api.dicebear.com/7.x/notionists/svg?seed=" +
profile.username
}
alt={profile.username}
/>
<AvatarFallback>{profile.username}</AvatarFallback>
</Avatar>
<div>
<p className="justify-center text-3xl font-semibold">{profile.username}</p>
<p className="text-gray-400">IP: {profile.login_ip || 'Unknown'}</p>
<p className="text-gray-400">IP: {profile.login_ip || "Unknown"}</p>
</div>
{isDesktop &&
{isDesktop && (
<ProfileCard className="flex mt-4 justify-center items-center max-w-[300px] rounded-lg" />
}
)}
</div>
{!isDesktop &&
{!isDesktop && (
<ProfileCard className="flex justify-center items-center max-w-full rounded-lg" />
}
)}
<div className="w-full">
<div className="flex flex-col gap-4">
<Card className="w-full">
@@ -61,5 +66,5 @@ export default function ProfilePage() {
</div>
</div>
)
);
)
}