added social media links

src/components/Footer.astro

@@ -2,16 +2,27 @@
 import { useTranslations } from '@/i18n/utils'
 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'
 
-type Props = {
+type Props = z.infer<typeof footerSchema> & {
   lang?: string
 }
 
-const { lang } = Astro.props
+const SOCIAL_MEDIA_ICONS_MAP: Record<string, React.ComponentType<IconProps>> = {
+  telegram: TelegramIcon,
+  instagram: InstagramIcon,
+}
+
+const { lang, socialMediaLinks } = Astro.props
 const t = useTranslations(lang)
 ---
 
-<footer id="contacts" class="flex flex-col items-center gap-4 md:gap-6 text-center">
+<footer id="contacts" class="flex flex-col items-center gap-4 text-center md:gap-6">
   <script
     is:inline
     type="text/javascript"
@@ -19,11 +30,26 @@ const t = useTranslations(lang)
     async
     src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&width=100%25&height=400&lang=ru_RU&scroll=true"
   ></script>
-  <div class="flex flex-col items-center gap-3 px-4 py-6 md:gap-4 md:px-6 md:py-8 text-center">
+  <div class="flex flex-col items-center gap-3 px-4 py-6 text-center md:gap-4 md:px-6 md:py-8">
     <Image src={logoSrc} alt="logo" class="h-32 w-auto md:h-48" />
     <p class="text-light text-sm">
       © {new Date().getFullYear()}
       {t('footer.copyright')}
     </p>
+    {
+      socialMediaLinks && (
+        <div class="flex gap-4 text-text-light">
+          {socialMediaLinks.map(({ href, target, icon }) => {
+            const Icon = SOCIAL_MEDIA_ICONS_MAP[icon]
+
+            return (
+              <a href={href} target={target} rel="noopener noreferrer">
+                <Icon className="fill-text hover:fill-text-light transition-all duration-300" />
+              </a>
+            )
+          })}
+        </div>
+      )
+    }
   </div>
 </footer>