Add contact to the website, fix some small things

astro/src/components/web/Contact.astro

@@ -0,0 +1,35 @@
+---
+import { getImageUrl } from '@/lib/images';
+import { markdownToHtml } from '@/lib/markdown';
+import { Image } from 'astro:assets';
+
+interface Props {
+    contact: ContactComponent;
+}
+
+const contact = Astro.props.contact;
+---
+
+<div
+    id={`contact-${contact.id}`}
+    class="flex lg:flex-row flex-col lg:justify-center justify-center items-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center"
+>
+    <div class="flex flex-col gap-1.5">
+        <h2 class="text-5xl font-bold">{contact.title}</h2>
+        <div set:html={markdownToHtml(contact.text)}></div>
+    </div>
+
+    <div class="flex flex-col gap-2">
+        { contact.methods.map((method) => (
+            <a href={method.url} target="_blank" style={{ "--sc": method.color }} class="flex flex-row items-center gap-2 text-lg hover:text-(--sc) duration-200">
+                <Image
+                    src={method.icon.url}
+                    alt={method.title}
+                    width="30"
+                    height="30"
+                />
+                <span>{method.title}</span>
+            </a>
+        )) }
+    </div>
+</div>

astro/src/components/webpage/Webpage.astro

@@ -9,14 +9,13 @@ import Reviews from '../web/Reviews.astro';
 import LastBlogs from '../web/LastBlogs.astro';
 import LastProjects from '../web/LastProjects.astro';
 import LastAlbums from '../web/LastAlbums.astro';
+import Contact from '../web/Contact.astro';
 
 interface Props {
     webpage: WebpageComponent[];
 }
 
 const components = Astro.props.webpage;
-
-console.log(Astro.props.webpage);
 ---
 
 <div class="flex flex-col">
@@ -29,6 +28,7 @@ console.log(Astro.props.webpage);
             { component.component === "FrequentlyAskedQuestions" && <FrequentlyAskedQuestions faq={component} /> }
             { component.component === "EquipmentTable" && <EquipmentTable equipment={component} /> }
             { component.component === "Reviews" && <Reviews reviews={component} /> }
+            { component.component === "Contact" && <Contact contact={component} /> }
             { component.component === "LastBlogs" && <LastBlogs blogs={component} /> }
             { component.component === "LastProjects" && <LastProjects projects={component} /> }
             { component.component === "LastGalleries" && <LastAlbums albums={component} /> }

astro/src/content/pages/pages.ts

@@ -213,7 +213,7 @@ export function dataToPage(pageRecord: any): WebPage {
                     contactComponent.methods.push({
                         id: contactMethodRecord["id"],
                         title: contactMethodRecord["title"],
-                        text: contactMethodRecord["text"],
+                        url: contactMethodRecord["url"],
                         color: contactMethodRecord["color"],
                         icon: {
                             url: getImageUrl(contactMethodRecord["icon"]["filename_disk"]),

astro/src/graphql/pages/getAllPages.graphql

@@ -180,7 +180,7 @@ query getAllPages($date: String!) {
                         date_created,
                         date_updated,
                         title,
-                        text,
+                        url,
                         icon {
                             id,
                             created_on,

astro/src/graphql/pages/getPage.graphql

@@ -180,7 +180,7 @@ query getAllPages($date: String!, $route: String!) {
                         date_created,
                         date_updated,
                         title,
-                        text,
+                        url,
                         icon {
                             id,
                             created_on,

astro/src/types/components/contact.d.ts

@@ -10,7 +10,7 @@ type ContactComponent = {
 type ContactMethod = {
     id: string;
     title: string;
-    text: string;
+    url: string;
     color: string;
     icon: PhotoProps;
 }