Public Access
48 lines
1.8 KiB
React
48 lines
1.8 KiB
React
import {useState} from 'react';
|
|
import {useTranslation} from 'react-i18next';
|
|
import {UserRound} from 'lucide-react';
|
|
|
|
import {Button} from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
|
|
|
|
/**
|
|
* Uses the art of this Steam game as banner or background of the public profile; a checked item removes it again.
|
|
*
|
|
* @param onSaved gets the whole saved style
|
|
*/
|
|
export default function ProfileArtMenu({appid, style, onSaved}) {
|
|
const {t} = useTranslation();
|
|
const save = useSaveProfileStyle();
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const toggle = async (field) => {
|
|
setSaving(true);
|
|
const saved = await save((stored) => ({[field]: stored[field] === appid ? null : appid}), style);
|
|
if (saved) onSaved(saved);
|
|
setSaving(false);
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" disabled={saving}><UserRound/>{t('GAME_DETAIL.PROFILE_ART')}</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuCheckboxItem checked={style.bannerAppid === appid} onCheckedChange={() => toggle('bannerAppid')}>
|
|
{t('GAME_DETAIL.PROFILE_BANNER')}
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem checked={style.backgroundAppid === appid}
|
|
onCheckedChange={() => toggle('backgroundAppid')}>
|
|
{t('GAME_DETAIL.PROFILE_BACKGROUND')}
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|