Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

Commit

Permalink
traducciones adopcion y fincas
Browse files Browse the repository at this point in the history
  • Loading branch information
“delfina” committed Oct 14, 2024
1 parent 220eccb commit 41da35a
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 30 deletions.
41 changes: 26 additions & 15 deletions src/components/AdoptarArbol/AdoptarArbol.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,35 @@ import { ArbolInterface } from '../../store/services/arbolApi';

interface AdoptarArbolProps {
datos: ArbolInterface;
language: 'es' | 'en'; // Aquí añadimos el language
}

const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos, language }) => {
const navigate = useNavigate();

// Contenido traducido
const content: Record<'es' | 'en', any> = {

Check failure on line 18 in src/components/AdoptarArbol/AdoptarArbol.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
es: {
adoptButton: 'Adoptar este árbol',
type: 'Tipo',
finca: 'Finca',
productor: 'Productor',
},
en: {
adoptButton: 'Adopt this tree',
type: 'Type',
finca: 'Farm',
productor: 'Producer',
},
};

const { adoptButton, type, finca, productor } = content[language];

return (
<div className="bg-white rounded-xl overflow-hidden shadow-lg flex flex-col w-full max-w-[250px]">
<div className="relative">
<img
src={datos.images[0]} // Cambié imageUrl a images
src={datos.images[0]}
alt={`Árbol de ${datos.type}`}
className="w-full h-48 object-cover transition-all duration-300 group-hover:brightness-95"
/>
Expand All @@ -44,8 +63,7 @@ const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
aria-hidden="true"
/>
<span className="truncate">
Tipo:{' '}
<span className="text-[#00BF62] font-medium">{datos.type}</span>
{type}: <span className="text-[#00BF62] font-medium">{datos.type}</span>
</span>
</p>
<p className="flex items-center text-gray-700 text-sm">
Expand All @@ -54,10 +72,7 @@ const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
aria-hidden="true"
/>
<span className="truncate">
Finca:{' '}
<span className="text-[#00BF62] font-medium">
{datos.finca.name} {/* Accedemos a la finca desde datos */}
</span>
{finca}: <span className="text-[#00BF62] font-medium">{datos.finca.name}</span>
</span>
</p>
<p className="flex items-center text-gray-700 text-sm">
Expand All @@ -66,12 +81,8 @@ const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
aria-hidden="true"
/>
<span className="truncate">
Productor:{' '}
<span className="text-[#00BF62] font-medium">
{datos.finca.productor.nombre +
' ' +
datos.finca.productor.apellido}{' '}
{/* Accedemos al productor desde finca */}
{productor}: <span className="text-[#00BF62] font-medium">
{datos.finca.productor.nombre} {datos.finca.productor.apellido}
</span>
</span>
</p>
Expand All @@ -82,7 +93,7 @@ const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
onClick={() => navigate(`/adopta-un-arbol/${datos.id}`)}
className="w-full mt-4 rounded-lg bg-[#4BAF47] text-white transition-all duration-300 hover:bg-[#3B8833] py-2 px-4 font-medium shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#4BAF47] focus:ring-opacity-50"
>
Adoptar este árbol
{adoptButton}
</button>
</div>
</div>
Expand Down
25 changes: 15 additions & 10 deletions src/pages/Adoptar/Adoptar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@ import { useGetArbolesQuery } from '../../store/services/arbolApi';
import { useSearchParams } from 'react-router-dom';
import { ArbolInterface } from '../../store/services/arbolApi';
import { motion } from 'framer-motion';
import { useLanguage } from '../../LanguageContext/LanguageContext'; // Importar useLanguage
import './Adoptar.css';

const Adoptar: React.FC = () => {
const { data: arboles, error, isLoading } = useGetArbolesQuery();
const [searchParams] = useSearchParams();
const [searchTerm, setSearchTerm] = useState('');

const { language } = useLanguage(); // Usar useLanguage para obtener el idioma actual

useEffect(() => {
const name = searchParams.get('search');
Expand Down Expand Up @@ -59,7 +62,7 @@ const Adoptar: React.FC = () => {
}

if (error) {
return <p>Ocurrió un error al cargar los árboles.</p>;
return <p>{language === 'es' ? 'Ocurrió un error al cargar los árboles.' : 'An error occurred while loading the trees.'}</p>;
}

return (
Expand All @@ -70,15 +73,17 @@ const Adoptar: React.FC = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Adopciones
{language === 'es' ? 'Adopciones' : 'Adoptions'}
</motion.h1>
<motion.p
className="text-gray-500 mb-4 sm:mb-6 max-w-2xl"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
Adopta un árbol para apoyar a un agricultor y recibe tu cosecha a lo largo de la temporada.
{language === 'es'
? 'Adopta un árbol para apoyar a un agricultor y recibe tu cosecha a lo largo de la temporada.'
: 'Adopt a tree to support a farmer and receive your harvest throughout the season.'}
</motion.p>
<motion.div
initial={{ opacity: 0, x: -20 }}
Expand All @@ -91,23 +96,23 @@ const Adoptar: React.FC = () => {
sx={{
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'green', // Color del borde normal
borderColor: 'green',
},
'&:hover fieldset': {
borderColor: '#909590', // Color del borde cuando se pasa el mouse
borderColor: '#909590',
},
'&.Mui-focused fieldset': {
borderColor: 'green', // Color del borde cuando está enfocado
borderColor: 'green',
},
},
'& .MuiInputLabel-root': {
color: 'gray', // Color del label
color: 'gray',
},
'& .MuiInputLabel-root.Mui-focused': {
color: 'green', // Color del label cuando está enfocado
color: 'green',
},
}}
label="Busca un árbol"
label={language === 'es' ? 'Busca un árbol' : 'Search for a tree'}
variant="outlined"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
Expand Down Expand Up @@ -143,7 +148,7 @@ const Adoptar: React.FC = () => {
visible: { opacity: 1, y: 0 },
}}
>
<AdoptarArbol datos={arbol} />
<AdoptarArbol datos={arbol} language={language}/>
</motion.div>
))}
</motion.div>
Expand Down
12 changes: 7 additions & 5 deletions src/pages/FincaInfo/FincaInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import { Arbol, Hacienda } from '../../types/types';
import { Leaf, MapPin, User, Phone, Mail, Award } from 'lucide-react';
import { useLanguage } from '../../LanguageContext/LanguageContext';

const FincaInfo: React.FC = () => {
const { language } = useLanguage(); // Usar el idioma seleccionado
const { data: fincaData, isLoading, isError } = useGetFincaDataQuery(1);

if (isLoading) {
Expand All @@ -27,7 +29,7 @@ const FincaInfo: React.FC = () => {
}

if (isError) {
return <div className="text-center text-red-600 p-8">Error al cargar los datos. Por favor, intenta de nuevo más tarde.</div>;
return <div className="text-center text-red-600 p-8">{language === 'es' ? 'Error al cargar los datos. Por favor, intenta de nuevo más tarde.' : 'Error loading data. Please try again later.'}</div>;
}

return (
Expand Down Expand Up @@ -90,12 +92,12 @@ const FincaInfo: React.FC = () => {
<motion.div className="bg-green-50 p-6 rounded-xl shadow-sm" variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}>
<h3 className="text-2xl font-semibold text-green-700 mb-4 flex items-center">
<Leaf className="mr-2" size={24} />
Prácticas Sostenibles
{language === 'es' ? 'Prácticas Sostenibles' : 'Sustainable Practices'}
</h3>
<p className="text-gray-700">{finca.practicesSustainable}</p>
</motion.div>
<motion.div className="bg-green-50 p-6 rounded-xl shadow-sm" variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}>
<h3 className="text-2xl font-semibold text-green-700 mb-4">Árboles Disponibles</h3>
<h3 className="text-2xl font-semibold text-green-700 mb-4">{language === 'es' ? 'Árboles Disponibles' : 'Available Trees'}</h3>
<ul className="space-y-2">
{finca.arbol.map((tree: Arbol, index: number) => (
<li key={index} className="flex justify-between items-center">
Expand All @@ -109,7 +111,7 @@ const FincaInfo: React.FC = () => {
<motion.div className="bg-green-50 p-6 rounded-xl shadow-sm" variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}>
<h3 className="text-2xl font-semibold text-green-700 mb-4 flex items-center">
<User className="mr-2" size={24} />
Productor
{language === 'es' ? 'Productor' : 'Producer'}
</h3>
<p className="text-xl font-medium text-gray-800 mb-2">
{finca.productor.nombre} {finca.productor.apellido}
Expand All @@ -128,7 +130,7 @@ const FincaInfo: React.FC = () => {
<div className="mt-4">
<h4 className="font-semibold text-green-700 flex items-center mb-2">
<Award className="mr-2" size={18} />
Certificaciones:
{language === 'es' ? 'Certificaciones' : 'Certifications'}:
</h4>
<ul className="list-disc list-inside text-gray-700">
{finca.productor.certificaciones.map((cert, idx) => (
Expand Down

0 comments on commit 41da35a

Please sign in to comment.