Ilgeldi
/
turkmen-textile-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring

This commit is contained in:
Batyr 2025-05-21 13:43:39 +05:00
parent 4d1bbf8fe2
commit 597ee0abc1
13 changed files with 178 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/cover.tsx
View File

@ -6,7 +6,7 @@ interface Props {
export const Cover: FC<Props> = ({ title }) => {
return (
<div className="relative flex items-center h-[216px] w-full justify-center">
<div className="relative flex items-center h-[116px] md:h-[216px] w-full justify-center">
<img
src="/cover.png"
className="-z-10 absolute size-full object-cover top-0 left-0"

6
src/components/shared/home/home-about.tsx
View File

@ -22,6 +22,8 @@ export const HomeAbout: FC = () => {
const title = data?.find((item) => item.key === "index_1")?.text;
const text = data?.find((item) => item.key === "index_2")?.text;
const translate = useTranslate(lang);
if (isPending) return <Loader />;
return (
@ -36,9 +38,7 @@ export const HomeAbout: FC = () => {
/>
<Link to="/about" className="w-fit">
<Button variant={"outline"}>
{homeAbout[useTranslate(lang)].button}
</Button>
<Button variant={"outline"}>{homeAbout[translate].button}</Button>
</Link>
</div>

79
src/components/shared/home/home-sponsors.tsx Normal file
View File

@ -0,0 +1,79 @@
import { cn } from "@/lib/utils";
import { FC } from "react";
import { Link } from "react-router-dom";
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";
import { useTranslation } from "react-i18next";
import { useSponsors } from "@/hooks/tanstack/use-sponsors";
import { Container } from "@/components/layout";
import { Loader } from "../loader";
interface Props {
className?: string;
}
export const HomeSponsors: FC<Props> = ({ className }) => {
const [emblaRef] = useEmblaCarousel(
{
loop: true,
align: "start",
skipSnaps: true,
duration: 75,
},
[Autoplay({ stopOnInteraction: false, delay: 3000 })]
);
const { data, isPending } = useSponsors();
const { t } = useTranslation("home", { keyPrefix: "sponsors" });
if (isPending) return <Loader />;
return (
<section className={cn("py-20", className)}>
<Container className="flex flex-col gap-6">
<h2 className="text-3xl">{t("title")}</h2>
<div ref={emblaRef} className="embla overflow-hidden">
<div className="embla__container flex">
{data?.map((item, i) =>
item.link ? (
<Link
target="_blank"
to={item.link}
key={i}
className="bg-surface_container flex flex-col embla__slide mr-6 min-w-0 flex-[0_0_288px] items-center justify-center min-h-[128px] w-full"
>
<img
src={item?.image?.path}
alt="logo"
className="object-contain flex-auto"
/>
<div className="bg-secondary_container text-xs text-center py-1 px-2 w-full">
{item.name}
</div>
</Link>
) : (
<div
key={i}
className="bg-surface_container embla__slide mr-6 min-w-0 flex-[0_0_288px] items-center justify-center minh-[128px] w-full"
>
<div className="h-[128px] w-full">
<img
src={item?.image?.path}
alt="logo"
className="object-contain size-full"
/>
</div>
<div className="bg-secondary_container text-xs text-center py-1 px-2">
{item.name}
</div>
</div>
)
)}
</div>
</div>
</Container>
</section>
);
};

1
src/components/shared/home/index.ts
View File

@ -3,3 +3,4 @@ export { HomeTime } from "./home-time";
export { HomeAbout } from "./home-about";
export { HomeTheme } from "./home-theme";
export { HomeOffers } from "./home-offers";
export { HomeSponsors } from "./home-sponsors";

4
src/data/home/home-hero.data.ts
View File

@ -15,7 +15,7 @@ export const btns = [
},
{
title: "Список участников",
link: "",
link: "/participants",
},
{
title: "B2B | B2G встречи",
@ -38,7 +38,7 @@ export const btns = [
},
{
title: "List of participants",
link: "/",
link: "/participants",
},
{
title: "B2B | B2G meetings",

15
src/hooks/tanstack/use-sponsors.ts Normal file
View File

@ -0,0 +1,15 @@
import { useQuery } from "@tanstack/react-query";
import { useLangStore } from "@/store/lang";
import { getSponsors } from "@/services/service";
export const useSponsors = () => {
const lang = useLangStore((state) => state.lang);
const { data, isPending } = useQuery({
queryKey: ["sponsors", lang],
queryFn: () => getSponsors(lang),
select: ({ data }) => data.data,
});
return { data, isPending };
};

6
src/locales/en/home.json
View File

@ -23,7 +23,7 @@
},
{
"title": "Participants list",
"link": ""
"link": "/participants"
},
{
"title": "B2B | B2G meetings",
@ -57,5 +57,9 @@
],
"button": "More about the exhibition"
},
"sponsors": {
"title": "Sponsors and partners"
}
}

6
src/locales/ru/home.json
View File

@ -22,7 +22,7 @@
},
{
"title": "Список участников",
"link": ""
"link": "/participants"
},
{
"title": "B2B | B2G встречи",
@ -56,5 +56,9 @@
],
"button": "Подробнее о выставке"
},
"sponsors": {
"title": "Спонсоры и партнеры"
}
}

4
src/pages/home.tsx
View File

@ -2,19 +2,19 @@ import {
HomeAbout,
HomeHero,
HomeOffers,
HomeSponsors,
HomeTheme,
HomeTime,
} from "@/components/shared";
import { HomePartners } from "@/components/shared/home/home-partners";
export default function Home() {
return (
<div className="flex flex-col gap-20">
<HomeHero />
<HomeAbout />
<HomeSponsors />
<HomeOffers />
<HomeTheme />
<HomePartners />
<HomeTime />
</div>
);

2
src/pages/participants.tsx
View File

@ -4,12 +4,14 @@ import { useLangStore } from "@/store/lang";
import { Container } from "@/components/layout";
import { Loader, ParticipantItem, Tabs } from "@/components/shared";
import { useParticipants } from "@/hooks/tanstack/use-participants";
import { useScrollTop } from "@/hooks/use-scroll-top";
interface Props {
className?: string;
}
const Participants: FC<Props> = ({ className }) => {
useScrollTop();
const lang = useLangStore((state) => state.lang);
const { data, isPending } = useParticipants();

34
src/pages/stend-form.tsx
View File

@ -40,10 +40,12 @@ export default function StendForm() {
useEffect(() => {
window.scrollTo({ behavior: "smooth", top: 0 });
}, [status]);
}, []);
const { errors } = form.formState;
const translate = useTranslate(lang);
return (
<div>
<Cover title={stendData[useTranslate(lang)].cover} />
@ -64,7 +66,7 @@ export default function StendForm() {
render={({ field }) => (
<FormItem className="space-y-5">
<FormLabel className="text-xl">
{stendData[useTranslate(lang)].h2}
{stendData[translate].h2}
</FormLabel>
<FormControl>
@ -81,7 +83,7 @@ export default function StendForm() {
/>
</FormControl>
<FormLabel className="text-base">
{stendData[useTranslate(lang)].radio}
{stendData[translate].radio}
</FormLabel>
</FormItem>
@ -93,7 +95,7 @@ export default function StendForm() {
/>
</FormControl>
<FormLabel className="text-base">
{stendData[useTranslate(lang)].radio_2}
{stendData[translate].radio_2}
</FormLabel>
</FormItem>
</RadioGroup>
@ -103,51 +105,51 @@ export default function StendForm() {
/>
<Field
label={stendData[useTranslate(lang)].label_1}
label={stendData[translate].label_1}
name="company_name"
control={form.control}
error={errors.company_name}
/>
<Field
label={stendData[useTranslate(lang)].label_2}
label={stendData[translate].label_2}
name="rep_name"
control={form.control}
error={errors.rep_name}
/>
<Field
label={stendData[useTranslate(lang)].label_3}
label={stendData[translate].label_3}
name="job_title"
control={form.control}
error={errors.job_title}
/>
<Field
label={stendData[useTranslate(lang)].number_of_participants}
label={stendData[translate].number_of_participants}
type="number"
name="participants_number"
control={form.control}
error={errors.participants_number}
/>
<Field
label={stendData[useTranslate(lang)].label_4}
label={stendData[translate].label_4}
name="country"
control={form.control}
error={errors.country}
/>
<Field
label={stendData[useTranslate(lang)].label_5}
label={stendData[translate].label_5}
name="email"
control={form.control}
error={errors.email}
/>
<Field
label={stendData[useTranslate(lang)].label_6}
label={stendData[translate].label_6}
name="phone"
control={form.control}
error={errors.phone}
/>
<Field
label={stendData[useTranslate(lang)].label_7}
label={stendData[translate].label_7}
name="website"
control={form.control}
/>
@ -158,7 +160,7 @@ export default function StendForm() {
render={({ field }) => (
<FormItem className="space-y-5">
<FormLabel className="text-xl">
{stendData[useTranslate(lang)].visa}
{stendData[translate].visa}
</FormLabel>
<FormControl>
@ -175,7 +177,7 @@ export default function StendForm() {
/>
</FormControl>
<FormLabel className="text-base">
{stendData[useTranslate(lang)].visa_radio}
{stendData[translate].visa_radio}
</FormLabel>
</FormItem>
@ -187,7 +189,7 @@ export default function StendForm() {
/>
</FormControl>
<FormLabel className="text-base">
{stendData[useTranslate(lang)].visa_radio_2}
{stendData[translate].visa_radio_2}
</FormLabel>
</FormItem>
</RadioGroup>
@ -200,7 +202,7 @@ export default function StendForm() {
{form.formState.isSubmitting ? (
<Loader className="animate-spin" />
) : (
stendData[useTranslate(lang)].button
stendData[translate].button
)}
</Button>
</motion.form>

36
src/routes.ts Normal file
View File

@ -0,0 +1,36 @@
// import { lazy } from "react";
// import { RouteObject } from "react-router-dom";
// import App from "./App";
// const lazyLoad = (path: string) =>
// lazy(() => import(/* webpackPrefetch: true */ path));
// const Home = lazyLoad("./pages/home");
// const About = lazyLoad("./pages/about");
// const B2b = lazyLoad("./pages/b2b");
// const BecomeSponsor = lazyLoad("./pages/become-sponsor");
// const StendForm = lazyLoad("./pages/stend-form");
// const Contacts = lazyLoad("./pages/contacts");
// const News = lazyLoad("./pages/news");
// const NewsInner = lazyLoad("./pages/news-inner");
// const Participants = lazyLoad("./pages/participants");
// const Media = lazyLoad("./pages/media");
// export const routes: RouteObject[] = [
// {
// path: "/",
// element: <App />,
// children: [
// { index: true, element: <Home /> },
// { path: "about", element: <About /> },
// { path: "B2B-B2G", element: <B2b /> },
// { path: "become-sponsor", element: <BecomeSponsor /> },
// { path: "stend-form", element: <StendForm /> },
// { path: "contacts", element: <Contacts /> },
// { path: "news", element: <News /> },
// { path: "news/:id", element: <NewsInner /> },
// { path: "participants", element: <Participants /> },
// { path: "media", element: <Media /> },
// ],
// },
// ];

9
src/services/service.ts
View File

@ -160,3 +160,12 @@ export const getVideos = async (id: number) => {
return data;
};
export const getSponsors = async (lang: LangState["lang"]) => {
const data = axios_url<PartnersType>("sponsors_and_partners", {
headers: {
"Accept-Language": lang,
},
});
return data;
};