admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: profile picture fetching through guard service

Browse Source
This commit is contained in:
Amir Adal
2025-05-29 19:51:15 +02:00
parent 41c3dfdfe4
commit d9ca1ce2b4
7 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/components/Home/Tabs/Home.tsx
View File

@ -1,6 +1,6 @@
import { Button } from "@/components/ui/button";
import Avatar from "@/feature/Avatar";
import { useAuth } from "@/store/auth";
import { User } from "lucide-react";
import { type FC } from "react";
const Home: FC = () => {
@ -10,15 +10,7 @@ const Home: FC = () => {
return (
<div className="flex flex-col items-center gap-2 p-7">
<div className="w-24 h-24 sm:w-36 sm:h-36 overflow-hidden rounded-full flex items-center justify-center bg-gray-300">
{profile?.profile_picture ? (
<img
className="w-full h-full object-cover"
src={profile.profile_picture}
alt="profile pic"
/>
) : (
<User size={64} />
)}
<Avatar iconSize={64} />
</div>
<h1 className="dark:text-gray-200 text-gray-800 text-2xl select-none">
Welcome, {profile?.full_name}

7
web/src/components/Home/Tabs/PersonalInfo.tsx
View File

@ -1,3 +1,4 @@
import Avatar from "@/feature/Avatar";
import { ChevronRight } from "lucide-react";
import { type FC } from "react";
@ -35,11 +36,7 @@ const PersonalInfo: FC = () => {
</div>
<div>
<div className="w-16 h-16 overflow-hidden rounded-full dark:bg-gray-400 bg-gray-700">
<img
className="w-full h-full"
src="http://192.168.178.69:9000/guard-storage/profile_eff00028-2d9e-458d-8944-677855edc147_1748099702417601900.jpg"
alt="profile pic"
/>
<Avatar iconSize={12} />
</div>
</div>
</div>

15
web/src/feature/AccountList/index.tsx
View File

@ -1,8 +1,9 @@
import { type LocalAccount } from "@/repository/account";
import { useAuth } from "@/store/auth";
import { CirclePlus, User } from "lucide-react";
import { CirclePlus } from "lucide-react";
import { useCallback, type FC } from "react";
import { Link, useLocation } from "react-router";
import Avatar from "../Avatar";
const AccountList: FC = () => {
const accounts = useAuth((state) => state.accounts);
@ -27,17 +28,7 @@ const AccountList: FC = () => {
>
<div>
<div className="rounded-full w-10 h-10 overflow-hidden bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-200 mr-3 ring ring-gray-400 dark:ring dark:ring-gray-500">
{account.profilePicture ? (
<img
src={account.profilePicture}
className="w-full h-full flex-1 object-cover"
alt="profile"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<User />
</div>
)}
<Avatar iconSize={8} avatarId={account.profilePicture ?? null} />
</div>
</div>
<div className="flex flex-col">

14
web/src/feature/Avatar/index.tsx
View File

@ -1,22 +1,28 @@
import { useAuth } from "@/store/auth";
import { User } from "lucide-react";
import type { FC } from "react";
import { useMemo, type FC } from "react";
export interface AvatarProps {
iconSize?: number;
className?: string;
avatarId?: string;
}
const Avatar: FC<AvatarProps> = ({ iconSize = 32, className }) => {
const Avatar: FC<AvatarProps> = ({ iconSize = 32, className, avatarId }) => {
const profile = useAuth((state) => state.profile);
const avatar = useMemo(
() => (avatarId !== undefined ? avatarId : profile?.profile_picture),
[avatarId, profile?.profile_picture],
);
return (
<div
className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
>
{profile?.profile_picture ? (
{avatar ? (
<img
src={profile?.profile_picture?.toString()}
src={`/api/v1/avatar/${avatar?.toString()}`}
className="w-full h-full flex-1 object-cover"
alt="profile"
/>