Skip to content

Commit 0cb2442

Browse files
filipKovachevfilipKovachev
committed
fix avatar, translate app
1 parent 1fe0144 commit 0cb2442

File tree

23 files changed

+2125
-960
lines changed

23 files changed

+2125
-960
lines changed

‎examples/ecommerce-jewellery-store/src/data/mesagges.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
export const messages = {
2+
en: {
3+
title: "Vilora Jewelry",
4+
subtitle: "We offer exquisite jewelry, each showcasing timeless elegance",
5+
buttonText: "See Collections",
6+
bestsellersTitle: "Our Bestsellers",
7+
bestsellersSubtitle: "Enjoy an excellent selection of fine jewelry",
8+
timelessTitle: "Timeless Classics",
9+
timelessSubtitle: "Get our unique handmade collections",
10+
timelessContent: "Jewelry enhances style and adds elegance, with each piece telling a unique story.",
11+
fineJewelryTitle: "Fine Jewelry",
12+
fineJewelrySubtitle: "Get our unique handmade collections",
13+
fineJewelryContent: "Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale.",
14+
ringsTitle: "Our Rings",
15+
ringsSubtitle: "Enjoy an excellent selection of fine rings",
16+
watchesTitle: "Our Watches",
17+
watchesSubtitle: "Enjoy an excellent selection of watches",
18+
servicesTitle: "Services",
19+
servicesSubtitle: "Explore expert repairs to elevate your experience",
20+
servicesContent: "Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.",
21+
filterLabel: "Filter:",
22+
sortByLabel: "Sort by:",
23+
clearFiltersButton: "Clear Filters",
24+
categoryPlaceholder: "Category",
25+
materialPlaceholder: "Material",
26+
categoriesData: ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"],
27+
statusesData: ["Sale", "Recommended", "Must Have"],
28+
materialsData: ["Gold", "Silver"],
29+
addToCartButtonText: "Add to Cart",
30+
shoppingCartTitle: "Shopping Cart",
31+
backButtonText: "Back",
32+
removeButtonText: "Remove",
33+
emptyCartMessage: "Your shopping cart is empty.",
34+
proceedToCheckoutButtonText: "Proceed to Checkout"
35+
},
36+
es: {
37+
title: "Joyería Vilora",
38+
subtitle: "Ofrecemos joyería exquisita, cada una mostrando elegancia atemporal",
39+
buttonText: "Ver Colecciones",
40+
bestsellersTitle: "Nuestros Más Vendidos",
41+
bestsellersSubtitle: "Disfruta de una excelente selección de joyas finas",
42+
timelessTitle: "Clásicos Atemporales",
43+
timelessSubtitle: "Obtén nuestras colecciones únicas hechas a mano",
44+
timelessContent: "Las joyas mejoran el estilo y agregan elegancia, cada pieza cuenta una historia única.",
45+
fineJewelryTitle: "Joyería Fina",
46+
fineJewelrySubtitle: "Obtén nuestras colecciones únicas hechas a mano",
47+
fineJewelryContent: "Las joyas elevan el estilo y aportan sofisticación, cada pieza narra una historia distinta.",
48+
ringsTitle: "Nuestros Anillos",
49+
ringsSubtitle: "Disfruta de una excelente selección de anillos finos",
50+
watchesTitle: "Nuestros Relojes",
51+
watchesSubtitle: "Disfruta de una excelente selección de relojes",
52+
servicesTitle: "Servicios",
53+
servicesSubtitle: "Explora reparaciones expertas para mejorar tu experiencia",
54+
servicesContent: "Vilora ofrece servicios como diseños personalizados, reparaciones y tasaciones para mejorar la experiencia del cliente.",
55+
filterLabel: "Filtrar:",
56+
sortByLabel: "Ordenar por:",
57+
clearFiltersButton: "Borrar filtros",
58+
categoryPlaceholder: "Categoría",
59+
materialPlaceholder: "Material",
60+
categoriesData: ["Pulseras", "Anillos", "Pendientes", "Relojes", "Collares"],
61+
statusesData: ["Oferta", "Recomendado", "Imprescindible"],
62+
materialsData: ["Oro", "Plata"],
63+
addToCartButtonText: "Agregar al Carrito",
64+
shoppingCartTitle: "Carrito de Compras",
65+
backButtonText: "Volver",
66+
removeButtonText: "Eliminar",
67+
emptyCartMessage: "Tu carrito está vacío.",
68+
proceedToCheckoutButtonText: "Proceder al Pago"
69+
},
70+
fr: {
71+
title: "Bijoux Vilora",
72+
subtitle: "Nous proposons des bijoux exquis, chacun illustrant une élégance intemporelle",
73+
buttonText: "Voir les Collections",
74+
bestsellersTitle: "Nos Meilleures Ventes",
75+
bestsellersSubtitle: "Profitez d'une excellente sélection de bijoux fins",
76+
timelessTitle: "Classiques Intemporels",
77+
timelessSubtitle: "Découvrez nos collections artisanales uniques",
78+
timelessContent: "Les bijoux subliment le style et ajoutent de l'élégance, chaque pièce raconte une histoire unique.",
79+
fineJewelryTitle: "Bijoux Fins",
80+
fineJewelrySubtitle: "Découvrez nos collections artisanales uniques",
81+
fineJewelryContent: "Les bijoux rehaussent le style et apportent de la sophistication, chaque pièce raconte une histoire distincte.",
82+
ringsTitle: "Nos Bagues",
83+
ringsSubtitle: "Profitez d'une excellente sélection de bagues fines",
84+
watchesTitle: "Nos Montres",
85+
watchesSubtitle: "Profitez d'une excellente sélection de montres",
86+
servicesTitle: "Services",
87+
servicesSubtitle: "Explorez des réparations expertes pour enrichir votre expérience",
88+
servicesContent: "Vilora propose des services tels que des designs personnalisés, des réparations et des expertises pour enrichir l'expérience client.",
89+
filterLabel: "Filtrer :",
90+
sortByLabel: "Trier par :",
91+
clearFiltersButton: "Effacer les filtres",
92+
categoryPlaceholder: "Catégorie",
93+
materialPlaceholder: "Matériau",
94+
categoriesData: ["Bracelets", "Bagues", "Boucles d'oreilles", "Montres", "Colliers"],
95+
statusesData: ["Vente", "Recommandé", "Indispensable"],
96+
materialsData: ["Or", "Argent"],
97+
addToCartButtonText: "Ajouter au Panier",
98+
shoppingCartTitle: "Panier",
99+
backButtonText: "Retour",
100+
removeButtonText: "Supprimer",
101+
emptyCartMessage: "Votre panier est vide.",
102+
proceedToCheckoutButtonText: "Passer à la caisse",
103+
},
104+
};
105+
106+
export default messages;

‎examples/ecommerce-jewellery-store/src/pages/Home.tsx‎

Lines changed: 98 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,126 @@
1-
import React from 'react';
2-
import { BackgroundImage } from '../components/BackgroundImage';
1+
import React from "react";
2+
import { useStore } from "@nanostores/react";
3+
import { selectedLanguage } from "../helpers/languageStore";
4+
import messages from "../data/messages";
5+
import { BackgroundImage } from "../components/BackgroundImage";
6+
import { Layout } from "../components/Layout";
7+
import { CategoryList } from "../components/CategoryList";
8+
import { CustomSection } from "../components/CustomizedSection";
9+
import { OrderedImgText } from "../components/OrderedImageCard";
10+
import { Testemonials } from "../components/Testemonials";
11+
import AdminView from "../components/AdminView";
312
import model from "../assets/model_1.png";
4-
import { Layout } from '../components/Layout';
5-
import { CategoryList } from '../components/CategoryList';
6-
import { CardDescriptor } from "../data/types";
713
import silverBraceletOnyx from "../assets/listViewImages/silverBraceletOnyx.png";
814
import weddingBandsPearl from "../assets/listViewImages/weddingBandsPearl.png";
915
import roseGoldEarringsOpal from "../assets/listViewImages/roseGoldEarringsOpal.png";
10-
import { CustomSection } from '../components/CustomizedSection';
11-
import { OrderedImgText } from '../components/OrderedImageCard';
12-
import homeModel2 from '../assets/homeModel2.png';
13-
import homeModel3 from '../assets/homeModel3.png';
14-
import homeWatch1 from '../assets/homeWatch1.png';
1516
import diamondWeddingRing from "../assets/listViewImages/diamondWeddingRing.png";
1617
import diamondWeddingBands from "../assets/listViewImages/diamondWeddingBands.png";
17-
import brownWatch from '../assets/brownWatch.jpg';
18-
import vitageWatch from '../assets/vitageWatch.jpg';
18+
import brownWatch from "../assets/brownWatch.jpg";
19+
import vitageWatch from "../assets/vitageWatch.jpg";
1920
import casualSilverWatch from "../assets/listViewImages/casualSilverWatch.png";
20-
import homeServicesImage from '../assets/homeServicesImage.png';
21-
import { Testemonials } from '../components/Testemonials';
22-
import { useAdminContext } from "../helpers/AdminContext";
23-
import AdminView from "../components/AdminView";
21+
import homeModel2 from "../assets/homeModel2.png";
22+
import homeModel3 from "../assets/homeModel3.png";
23+
import homeWatch1 from "../assets/homeWatch1.png";
2424

25-
const data: CardDescriptor[] = [
25+
const data = [
2626
{ img: silverBraceletOnyx, collectionText: "Silver Bracelet with Onyx" },
2727
{ img: weddingBandsPearl, collectionText: "Wedding Bands with Pearls" },
28-
{ img: roseGoldEarringsOpal, collectionText: "Rose Gold Earrings with Opal" }
28+
{ img: roseGoldEarringsOpal, collectionText: "Rose Gold Earrings with Opal" },
2929
];
3030

31-
const ringsData: CardDescriptor[] = [
31+
const ringsData = [
3232
{ img: diamondWeddingRing, collectionText: "Diamond Wedding Ring" },
33-
{ img: diamondWeddingBands, collectionText: "Diamond Wedding Bands" }
33+
{ img: diamondWeddingBands, collectionText: "Diamond Wedding Bands" },
3434
];
3535

36-
const watchData: CardDescriptor[] = [
36+
const watchData = [
3737
{ img: brownWatch, collectionText: "Brown Leather Watch" },
3838
{ img: casualSilverWatch, collectionText: "Casual Silver Watch" },
39-
{ img: vitageWatch, collectionText: "Vintage Silver Watch" }
39+
{ img: vitageWatch, collectionText: "Vintage Silver Watch" },
4040
];
4141

42-
const Home: React.FC = () => {
43-
const { isAdmin } = useAdminContext();
44-
const title = "Vilora Jewelry";
45-
const subtitle = "we offer exquisite jewelry, each showcasing timeless elegance";
46-
const buttonText = "See Collections";
42+
const Home = () => {
43+
const [forceUpdate, setForceUpdate] = React.useState(0);
44+
const language = useStore(selectedLanguage);
45+
console.log(`selectedLanguage`,selectedLanguage)
46+
React.useEffect(() => {
47+
setForceUpdate((prev) => prev + 1);
48+
console.log("Language updated, forcing re-render:", language);
49+
}, [language]);
50+
const t = messages[language];
51+
console.log("Messages for Current Language:", messages[language]);
52+
console.log("Resolved Translations Object:", t);
53+
console.log("Title:", t.title);
54+
console.log("Subtitle:", t.subtitle);
55+
console.log("Button Text:", t.buttonText);
56+
console.log('T', t)
4757

58+
console.log()
4859
return (
4960
<>
5061
<BackgroundImage
51-
title={title}
52-
subtitle={subtitle}
53-
buttonText={buttonText}
62+
title={t.title}
63+
subtitle={t.subtitle}
64+
buttonText={t.buttonText}
5465
img={model}
5566
/>
56-
57-
{isAdmin ? (
58-
<Layout>
59-
<div className="k-mt-8">
60-
<AdminView />
61-
</div>
62-
</Layout>
63-
) : (
64-
<>
65-
<Layout>
66-
<section
67-
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
68-
style={{ paddingTop: "60px" }}
69-
>
70-
<CategoryList title='Our Bestsellers' subtitle='Enjoy an excellent selection of fine jewelry' data={data} />
71-
</section>
72-
</Layout>
73-
<Layout>
74-
<CustomSection>
75-
<OrderedImgText
76-
title='Timeless Classics'
77-
subtitle='Get our unique handmade collections'
78-
contentText='Jewelry enhances style and adds elegance, with each piece telling a unique story.'
79-
img={homeModel2}
80-
order='first'
81-
link="Shop Now"
82-
83-
/>
84-
</CustomSection>
85-
</Layout>
86-
<Layout>
87-
<CustomSection>
88-
<OrderedImgText
89-
title='Fine Jewelry'
90-
subtitle='Get our unique handmade collections'
91-
contentText="Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale."
92-
img={homeModel3}
93-
order='last'
94-
link="Shop Now"
95-
/>
96-
</CustomSection>
97-
</Layout>
98-
<Layout>
99-
<CustomSection>
100-
<CategoryList colSpan={6} title='Our Rings' subtitle='Enjoy an excellent selection of fine rings' data={ringsData} />
101-
</CustomSection>
102-
</Layout>
103-
<Layout>
104-
<CustomSection>
105-
<OrderedImgText
106-
title='Always On Time'
107-
subtitle='Get our unique watches'
108-
contentText='High-end gold watches for men are the epitome of luxury, combining precision with sophisticated craftsmanship.'
109-
img={homeWatch1}
110-
order='first'
111-
link="Shop Now"
112-
/>
113-
</CustomSection>
114-
</Layout>
115-
<Layout>
116-
<CustomSection>
117-
<CategoryList title='Our Watches' subtitle='Enjoy an excellent selection of watches' data={watchData} />
118-
</CustomSection>
119-
</Layout>
120-
<Layout>
121-
<CustomSection>
122-
<OrderedImgText
123-
title='Services'
124-
subtitle='Explore expert repairs to elevate your experience'
125-
contentText='Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.'
126-
img={homeServicesImage}
127-
order='last'
128-
link="Learn More"
129-
/>
130-
</CustomSection>
131-
</Layout>
132-
<Layout>
133-
<Testemonials />
134-
</Layout>
135-
</>
136-
)}
67+
<Layout>
68+
<section>
69+
<CategoryList
70+
title={t.bestsellersTitle}
71+
subtitle={t.bestsellersSubtitle}
72+
data={data}
73+
/>
74+
</section>
75+
</Layout>
76+
<Layout>
77+
<CustomSection>
78+
<OrderedImgText
79+
title={t.timelessTitle}
80+
subtitle={t.timelessSubtitle}
81+
contentText={t.timelessContent}
82+
img={homeModel2}
83+
order="first"
84+
link={t.buttonText}
85+
/>
86+
</CustomSection>
87+
</Layout>
88+
<Layout>
89+
<CustomSection>
90+
<OrderedImgText
91+
title={t.fineJewelryTitle}
92+
subtitle={t.fineJewelrySubtitle}
93+
contentText={t.fineJewelryContent}
94+
img={homeModel3}
95+
order="last"
96+
link={t.buttonText}
97+
/>
98+
</CustomSection>
99+
</Layout>
100+
<Layout>
101+
<CustomSection>
102+
<CategoryList
103+
title={t.ringsTitle}
104+
subtitle={t.ringsSubtitle}
105+
data={ringsData}
106+
/>
107+
</CustomSection>
108+
</Layout>
109+
<Layout>
110+
<CustomSection>
111+
<OrderedImgText
112+
title={t.watchesTitle}
113+
subtitle={t.watchesSubtitle}
114+
contentText={t.servicesContent}
115+
img={homeWatch1}
116+
order="first"
117+
link={t.buttonText}
118+
/>
119+
</CustomSection>
120+
</Layout>
121+
<Layout>
122+
<Testemonials />
123+
</Layout>
137124
</>
138125
);
139126
};

0 commit comments

Comments
 (0)