230419/my_closet
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

falta o link de share dos looks por causa do server, add seccao atribuido ao card do look + filtro de cores nos looks

Browse Source
This commit is contained in:
Vitor Moreira
2026-05-02 00:18:29 +01:00
parent d3b8eb3036
commit bccc0adea6
1 changed files with 44 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/App.jsx
View File

@@ -537,7 +537,11 @@ export default function App() {
createdAt: new Date().getTime(), createdAt: new Date().getTime(),
}); });
const shareUrl = `${window.location.origin}${window.location.pathname}?shared=${docRef.id}`; // Força o uso do domínio oficial se estiver em localhost (para os links de partilha funcionarem)
const baseUrl = (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')
? 'https://mycloset.epvc.pt'
: window.location.origin;
const shareUrl = `${baseUrl}${window.location.pathname}?shared=${docRef.id}`;
await navigator.clipboard.writeText(shareUrl); await navigator.clipboard.writeText(shareUrl);
setCopiedLookId(look.id); setCopiedLookId(look.id);
setTimeout(() => setCopiedLookId(null), 3000); setTimeout(() => setCopiedLookId(null), 3000);
@@ -1210,9 +1214,17 @@ export default function App() {
<div className="lg:col-span-2 space-y-10"> <div className="lg:col-span-2 space-y-10">
{(() => { {(() => {
const filteredBySectionLooks = looks.filter(look => const filteredBySectionLooks = looks.filter(look => {
activeSectionFilter === 'all' || (look.sections && look.sections.includes(activeSectionFilter)) const matchesSection = activeSectionFilter === 'all' || (look.sections && look.sections.includes(activeSectionFilter));
); let matchesColor = true;
if (colorFilter) {
matchesColor = look.items.some(id => {
const item = clothes.find(c => c.id === id);
return item && item.color && item.color.includes(colorFilter);
});
}
return matchesSection && matchesColor;
});
const availableLooks = filteredBySectionLooks.filter(look => const availableLooks = filteredBySectionLooks.filter(look =>
look.items.every(id => { look.items.every(id => {
@@ -1279,6 +1291,18 @@ export default function App() {
</p> </p>
</div> </div>
)} )}
{look.sections && look.sections.length > 0 && (
<div className="flex items-center gap-1 mt-4 overflow-x-auto custom-scrollbar no-scrollbar">
{look.sections.map(secId => {
const sec = sections.find(s => s.id === secId);
return sec ? (
<span key={sec.id} className="text-[10px] font-bold px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500 whitespace-nowrap">
{sec.emoji} {sec.name}
</span>
) : null;
})}
</div>
)}
</Card> </Card>
); );
}; };
@@ -1287,10 +1311,23 @@ export default function App() {
<> <>
{/* Looks disponíveis */} {/* Looks disponíveis */}
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center gap-3 px-2"> <div className="flex items-center justify-between px-2 flex-wrap gap-4">
<div className="flex items-center gap-3">
<div className="w-2.5 h-2.5 rounded-full bg-green-500"></div> <div className="w-2.5 h-2.5 rounded-full bg-green-500"></div>
<h3 className="text-2xl font-black tracking-tighter text-inherit">{t('lookHistory')} <span className="text-sm font-bold opacity-40">— {t('availableLooks')} ({availableLooks.length})</span></h3> <h3 className="text-2xl font-black tracking-tighter text-inherit">{t('lookHistory')} <span className="text-sm font-bold opacity-40">— {t('availableLooks')} ({availableLooks.length})</span></h3>
</div> </div>
<div className="flex items-center gap-2">
<Filter size={16} className="text-gray-400" />
<select
value={colorFilter}
onChange={(e) => setColorFilter(e.target.value)}
className={`p-2 rounded-xl border-none outline-none focus:ring-2 focus:ring-primary-500 font-bold text-xs ${darkMode ? 'bg-gray-800 text-white' : 'bg-gray-100'}`}
>
<option value="">{t('all') || 'Todas as cores'}</option>
{['Vermelho', 'Azul', 'Amarelo', 'Verde', 'Laranja', 'Roxo', 'Branco', 'Preto', 'Cinzento', 'Bege'].map(c => <option key={c} value={c}>{c}</option>)}
</select>
</div>
</div>
{availableLooks.length > 0 ? ( {availableLooks.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{availableLooks.map(renderLookCard)} {availableLooks.map(renderLookCard)}