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

new preference

Browse Source
This commit is contained in:
Vitor Moreira
2026-05-06 09:24:55 +01:00
parent b5e0d5fc8a
commit b4c7b88685
2 changed files with 52 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.jsx
View File

@@ -60,6 +60,7 @@ export default function App() {
const [language, setLanguage] = useState('PT');
const [showLangModal, setShowLangModal] = useState(false);
const [theme, setTheme] = useState('theme-indigo');
const [cardSize, setCardSize] = useState('large');
const [weatherData, setWeatherData] = useState(null);
// Estado para Partilha de Looks
@@ -154,6 +155,11 @@ export default function App() {
saveUserSetting('weatherAlerts', newVal);
};
const handleCardSizeChange = (newVal) => {
setCardSize(newVal);
saveUserSetting('cardSize', newVal);
};
// Buscar o look partilhado pelo link
const fetchSharedLook = async (lookId) => {
if (!lookId) return;
@@ -292,6 +298,7 @@ export default function App() {
if (data.settings.theme !== undefined) setTheme(data.settings.theme);
if (data.settings.notificationsEnabled !== undefined) setNotificationsEnabled(data.settings.notificationsEnabled);
if (data.settings.weatherAlerts !== undefined) setWeatherAlerts(data.settings.weatherAlerts);
if (data.settings.cardSize !== undefined) setCardSize(data.settings.cardSize);
}
}
else setUserProfile({});
@@ -1187,7 +1194,7 @@ export default function App() {
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-10">
{filteredClothes.map(item => (
<div key={item.id} className="group">
<Card className="overflow-hidden p-0 h-[480px] relative border-none hover:shadow-2xl transition-all duration-500" darkMode={darkMode}>
<Card className={`overflow-hidden p-0 relative border-none hover:shadow-2xl transition-all duration-500 ${cardSize === 'small' ? 'h-[240px]' : cardSize === 'medium' ? 'h-[360px]' : 'h-[480px]'}`} darkMode={darkMode}>
<img src={item.imageUrl} className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt={item.name} />
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col justify-end p-6 pb-[136px] text-white z-10 pointer-events-none">
@@ -1882,6 +1889,23 @@ export default function App() {
<div className={`w-6 h-6 rounded-full bg-white absolute top-1 transition-all ${weatherAlerts ? 'left-7' : 'left-1'}`}></div>
</button>
</div>
<div className="flex items-center justify-between">
<div>
<p className="font-bold text-inherit">{t('cardSize') || 'Tamanho do Card'}</p>
<p className="text-[10px] uppercase tracking-widest opacity-50 text-inherit">{t('cardSizeDesc') || 'Tamanho no armário/carrinho'}</p>
</div>
<div className="flex gap-2">
{['small', 'medium', 'large'].map(s => (
<button
key={s}
onClick={() => handleCardSizeChange(s)}
className={`px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all border-2 ${cardSize === s ? 'border-primary-600 bg-primary-600 text-white shadow-lg shadow-primary-600/30 scale-105' : 'border-transparent bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'}`}
>
{s === 'small' ? t('small') || 'Pequeno' : s === 'medium' ? t('medium') || 'Médio' : t('large') || 'Grande'}
</button>
))}
</div>
</div>
<div className="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-800">
<div>
<p className="font-bold text-inherit">{t('appLanguage')}</p>