From 2c1ebe5dae21382cc006d78711d31da4bd1f2b30 Mon Sep 17 00:00:00 2001 From: Salam-vsem Date: Thu, 15 May 2025 00:59:22 +0300 Subject: [PATCH] reworked slider + added coaches page --- astro.config.mjs | 1 + src/components/CoachCard.astro | 25 +++---- src/components/Footer.astro | 17 ++--- src/components/ServiceCard.astro | 7 +- src/components/SocialMediaIcon.tsx | 22 ++++++ src/components/header/Header.astro | 45 ++++++------ src/components/swiper/NavButtons.tsx | 34 +--------- src/components/swiper/SimpleSwiper.tsx | 43 ++++++++++++ src/components/swiper/Swiper.tsx | 42 ------------ src/components/swiper/SwiperWithNav.tsx | 21 ++++++ src/components/swiper/SwiperWithThumbs.tsx | 64 ++++++++++++++++++ src/components/swiper/hooks.ts | 22 +++--- src/components/swiper/index.ts | 2 +- src/components/swiper/styles.css | 3 - src/content.config.ts | 39 +++++------ .../assets/coaches => coaches/assets}/2.jpeg | Bin .../assets/batyr-cover.jpeg} | Bin src/content/coaches/assets/batyr-slide-1.jpeg | Bin 0 -> 91524 bytes src/content/coaches/assets/batyr-slide-2.jpeg | Bin 0 -> 68570 bytes src/content/coaches/assets/batyr-slide-3.jpeg | Bin 0 -> 64354 bytes src/content/coaches/assets/batyr-slide-4.jpg | Bin 0 -> 109820 bytes src/content/coaches/assets/batyr-slide-5.jpg | Bin 0 -> 96321 bytes src/content/coaches/assets/batyr-slide-6.jpg | Bin 0 -> 87515 bytes src/content/coaches/batyr-suleimanov.md | 39 +++++++++++ src/content/pages/main.md | 19 +----- src/i18n/ui.ts | 2 + src/i18n/utils.ts | 4 +- src/layouts/BaseLayout.astro | 8 ++- src/libs/image.ts | 34 +++++++++- src/pages/coaches/[...slug].astro | 48 +++++++++++++ src/pages/index.astro | 45 ++++++------ src/styles/global.css | 4 ++ 32 files changed, 389 insertions(+), 201 deletions(-) create mode 100644 src/components/SocialMediaIcon.tsx create mode 100644 src/components/swiper/SimpleSwiper.tsx delete mode 100644 src/components/swiper/Swiper.tsx create mode 100644 src/components/swiper/SwiperWithNav.tsx create mode 100644 src/components/swiper/SwiperWithThumbs.tsx delete mode 100644 src/components/swiper/styles.css rename src/content/{pages/assets/coaches => coaches/assets}/2.jpeg (100%) rename src/content/{pages/assets/coaches/1.jpeg => coaches/assets/batyr-cover.jpeg} (100%) create mode 100644 src/content/coaches/assets/batyr-slide-1.jpeg create mode 100644 src/content/coaches/assets/batyr-slide-2.jpeg create mode 100644 src/content/coaches/assets/batyr-slide-3.jpeg create mode 100644 src/content/coaches/assets/batyr-slide-4.jpg create mode 100644 src/content/coaches/assets/batyr-slide-5.jpg create mode 100644 src/content/coaches/assets/batyr-slide-6.jpg create mode 100644 src/content/coaches/batyr-suleimanov.md create mode 100644 src/pages/coaches/[...slug].astro diff --git a/astro.config.mjs b/astro.config.mjs index 22f0c5a..7f1b53a 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -7,6 +7,7 @@ import react from '@astrojs/react' // https://astro.build/config export default defineConfig({ integrations: [tailwind(), react()], + prefetch: true, i18n: { locales: ['ru', 'en'], defaultLocale: 'ru', diff --git a/src/components/CoachCard.astro b/src/components/CoachCard.astro index 6964e71..895766e 100644 --- a/src/components/CoachCard.astro +++ b/src/components/CoachCard.astro @@ -1,21 +1,22 @@ --- -import type { coachesSchema } from '@/content.config' import { useTranslations } from '@/i18n/utils' import { Image } from 'astro:assets' -import type { z } from 'astro:content' +import type { CollectionEntry } from 'astro:content' -type Props = z.infer> & { lang?: string } +type Props = CollectionEntry<'coaches'> & { lang?: string } -const { lang, name, description, image, imageAlt, link } = Astro.props +const { slug, lang, data } = Astro.props +const { name, description, cover, coverAlt } = data const t = useTranslations(lang) +const coachPageLink = `/coaches/${slug}` ---
- + {imageAlt}

{name}

{description &&

{description}

} - { - link && ( - - {t('coaches.link')} - - ) - } + + {t('coaches.link')} +
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index d0a92c3..9b46f48 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -4,20 +4,12 @@ import { Image } from 'astro:assets' import logoSrc from '@/assets/logo.png' import type { z } from 'astro:content' import type { footerSchema } from '@/content.config' -import type React from 'react' -import { TelegramIcon } from '@/assets/icons/TelegramIcon' -import { InstagramIcon } from '@/assets/icons/InstagramIcon' -import type { IconProps } from '@/assets/icons/types' +import { SocialMediaIcon } from './SocialMediaIcon' type Props = z.infer & { lang?: string } -const SOCIAL_MEDIA_ICONS_MAP: Record> = { - telegram: TelegramIcon, - instagram: InstagramIcon, -} - const { lang, socialMediaLinks } = Astro.props const t = useTranslations(lang) --- @@ -40,11 +32,12 @@ const t = useTranslations(lang) socialMediaLinks && (
{socialMediaLinks.map(({ href, target, icon }) => { - const Icon = SOCIAL_MEDIA_ICONS_MAP[icon] - return ( - + ) })} diff --git a/src/components/ServiceCard.astro b/src/components/ServiceCard.astro index 662bf4f..b5e529d 100644 --- a/src/components/ServiceCard.astro +++ b/src/components/ServiceCard.astro @@ -4,7 +4,7 @@ import type { z } from 'astro:content' type Props = z.infer & { highlighted?: boolean } -const { title, charachteristics, highlighted = false, link } = Astro.props +const { title, description, charachteristics, highlighted = false, link } = Astro.props ---
-
-

{title}

+
+

{title}

+ {description && {description}}
    diff --git a/src/components/SocialMediaIcon.tsx b/src/components/SocialMediaIcon.tsx new file mode 100644 index 0000000..bfc23d3 --- /dev/null +++ b/src/components/SocialMediaIcon.tsx @@ -0,0 +1,22 @@ +import { InstagramIcon } from '@/assets/icons/InstagramIcon' +import { TelegramIcon } from '@/assets/icons/TelegramIcon' +import type { IconProps } from '@/assets/icons/types' + +export const socialMedias = ['telegram', 'instagram'] +export type SocialMedia = (typeof socialMedias)[number] + +type SocialMediaIconProps = { + type: SocialMedia + className?: string +} + +const SOCIAL_MEDIA_ICONS_MAP: Record> = { + telegram: TelegramIcon, + instagram: InstagramIcon, +} + +export const SocialMediaIcon: React.FC = ({ type, className }) => { + const Icon = SOCIAL_MEDIA_ICONS_MAP[type] + + return Icon ? : null +} diff --git a/src/components/header/Header.astro b/src/components/header/Header.astro index 5901624..7ecd4a2 100644 --- a/src/components/header/Header.astro +++ b/src/components/header/Header.astro @@ -1,41 +1,42 @@ --- +import type { TranslationKey } from '@/i18n/ui' import MobileNavigation from './MobileNavigation' import { useTranslations } from '@/i18n/utils' -type Props = { +export type HeaderProps = { + navItems?: Array<{ key: TranslationKey; href: string }> lang?: string } -const { lang } = Astro.props +type Props = HeaderProps -const navItems = [ - { key: 'nav.coaches', href: '#coaches' }, - { key: 'nav.slider', href: '#image-slider' }, - { key: 'nav.services', href: '#services' }, - { key: 'nav.reviews', href: '#reviews' }, - { key: 'nav.contact', href: '#contacts' }, -] as const +const { lang, navItems } = Astro.props const t = useTranslations(lang) ---
    - - - + + { + navItems && ( + <> + + + + ) + }