new preference
This commit is contained in:
26
src/App.jsx
26
src/App.jsx
@@ -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>
|
||||
|
||||
@@ -192,6 +192,11 @@ export const translations = {
|
||||
selectOneColor: "Selecione pelo menos uma cor",
|
||||
addColorsToItems: "Adicione cores aos seus itens.",
|
||||
or: "OU",
|
||||
cardSize: "Tamanho do Card",
|
||||
cardSizeDesc: "Tamanho no armário/carrinho",
|
||||
small: "Pequeno",
|
||||
medium: "Médio",
|
||||
large: "Grande",
|
||||
},
|
||||
EN: {
|
||||
loginModeIntro: "The Future of Your Style",
|
||||
@@ -386,6 +391,11 @@ export const translations = {
|
||||
selectOneColor: "Select at least one color",
|
||||
addColorsToItems: "Add colors to your items.",
|
||||
or: "OR",
|
||||
cardSize: "Card Size",
|
||||
cardSizeDesc: "Size in closet/cart",
|
||||
small: "Small",
|
||||
medium: "Medium",
|
||||
large: "Large",
|
||||
},
|
||||
ES: {
|
||||
loginModeIntro: "El Futuro de Tu Estilo",
|
||||
@@ -580,6 +590,11 @@ export const translations = {
|
||||
selectOneColor: "Selecciona al menos un color",
|
||||
addColorsToItems: "Añade colores a tus artículos.",
|
||||
or: "O",
|
||||
cardSize: "Tamaño de Tarjeta",
|
||||
cardSizeDesc: "Tamaño en armario/carrito",
|
||||
small: "Pequeño",
|
||||
medium: "Medio",
|
||||
large: "Grande",
|
||||
},
|
||||
FR: {
|
||||
loginModeIntro: "Le Futur de Ton Style",
|
||||
@@ -774,6 +789,11 @@ export const translations = {
|
||||
selectOneColor: "Sélectionnez au moins une couleur",
|
||||
addColorsToItems: "Ajoutez des couleurs à vos articles.",
|
||||
or: "OU",
|
||||
cardSize: "Taille de la Carte",
|
||||
cardSizeDesc: "Taille dans placard/panier",
|
||||
small: "Petit",
|
||||
medium: "Moyen",
|
||||
large: "Grand",
|
||||
},
|
||||
DE: {
|
||||
loginModeIntro: "Die Zukunft deines Stils",
|
||||
@@ -965,8 +985,13 @@ export const translations = {
|
||||
piecesShort: "Stücke",
|
||||
editLook: "Outfit bearbeiten",
|
||||
uploadGallery: "Aus Galerie / Dateien hochladen",
|
||||
selectOneColor: "Wähle mindestens eine Farbe",
|
||||
addColorsToItems: "Füge deinen Artikeln Farben hinzu.",
|
||||
selectOneColor: "Wählen Sie mindestens eine Farbe",
|
||||
addColorsToItems: "Fügen Sie Ihren Artikeln Farben hinzu.",
|
||||
or: "ODER",
|
||||
cardSize: "Kartengröße",
|
||||
cardSizeDesc: "Größe in Schrank/Warenkorb",
|
||||
small: "Klein",
|
||||
medium: "Mittel",
|
||||
large: "Groß",
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user