contact page api intergrated
This commit is contained in:
parent
c1efaab359
commit
b7065344e8
|
|
@ -1,8 +1,14 @@
|
|||
// Modules
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Skeleton from "react-loading-skeleton";
|
||||
|
||||
// Images
|
||||
import board from "../../images/board.jpg";
|
||||
|
||||
// Helpers
|
||||
import { getContact } from "../../helpers/apiRequests";
|
||||
import { highlightColor } from "../../helpers/otherVariables";
|
||||
|
||||
// Icons
|
||||
import forward from "../../icons/arrow-forward.svg";
|
||||
import email from "../../icons/email-black.svg";
|
||||
|
|
@ -14,6 +20,12 @@ import ig from "../../icons/instagram-grey.svg";
|
|||
import twitter from "../../icons/twitter-gray.svg";
|
||||
|
||||
const ContactForm = () => {
|
||||
const [contact, setContact]: [any, React.Dispatch<any>] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
getContact(setContact);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="contact-form"
|
||||
|
|
@ -42,60 +54,111 @@ const ContactForm = () => {
|
|||
</div>
|
||||
<div className="contact-form-right-middle">
|
||||
<div className="contact-form-link">
|
||||
<a
|
||||
className="contact-form-link-left"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="tel:+99312468787"
|
||||
>
|
||||
<div className="link-icon">
|
||||
<img src={phone} alt="" />
|
||||
</div>
|
||||
<span>+993 12 46-87-87</span>
|
||||
</a>
|
||||
{contact ? (
|
||||
<a
|
||||
className="contact-form-link-left"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href={"tel:" + contact[0].phone}
|
||||
>
|
||||
<div className="link-icon">
|
||||
<img src={phone} alt="" />
|
||||
</div>
|
||||
<span>{contact[0].phone}</span>
|
||||
</a>
|
||||
) : (
|
||||
<Skeleton
|
||||
highlightColor={highlightColor}
|
||||
height={"1.9rem"}
|
||||
style={{ minWidth: "12rem" }}
|
||||
width={"100%"}
|
||||
/>
|
||||
)}
|
||||
<div className="contact-form-link-right">
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={ig} alt="" />
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={twitter} alt="" />
|
||||
</a>
|
||||
{contact ? (
|
||||
<a
|
||||
href={contact[0].instagram}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={ig} alt="" />
|
||||
</a>
|
||||
) : (
|
||||
<Skeleton
|
||||
height={"3rem"}
|
||||
width={"3rem"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
{contact ? (
|
||||
<a
|
||||
href={contact[0].twitter}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={twitter} alt="" />
|
||||
</a>
|
||||
) : (
|
||||
<Skeleton
|
||||
height={"3rem"}
|
||||
width={"3rem"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-form-link">
|
||||
<div className="contact-form-link-left">
|
||||
<div className="link-icon">
|
||||
<img src={pin} alt="" />
|
||||
{contact ? (
|
||||
<div className="contact-form-link-left">
|
||||
<div className="link-icon">
|
||||
<img src={pin} alt="" />
|
||||
</div>
|
||||
<span>{contact[0].address}</span>
|
||||
</div>
|
||||
<span>Atatürk köçesi 80, Aşgabat 744000, Туркменистан</span>
|
||||
</div>
|
||||
) : (
|
||||
<Skeleton
|
||||
height={"1.9rem"}
|
||||
style={{ minWidth: "25rem" }}
|
||||
width={"100%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="contact-form-link-right">
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={yt} alt="" />
|
||||
</a>
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={fb} alt="" />
|
||||
</a>
|
||||
{contact ? (
|
||||
<a
|
||||
href={contact[0].youtube}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={yt} alt="" />
|
||||
</a>
|
||||
) : (
|
||||
<Skeleton
|
||||
height={"3rem"}
|
||||
width={"3rem"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
{contact ? (
|
||||
<a
|
||||
href={contact[0].facebook}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="link-icon"
|
||||
>
|
||||
<img src={fb} alt="" />
|
||||
</a>
|
||||
) : (
|
||||
<Skeleton
|
||||
height={"3rem"}
|
||||
width={"3rem"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
post,
|
||||
videos,
|
||||
structure,
|
||||
contacts,
|
||||
} from "../links";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -102,3 +103,12 @@ export const getStructure = (setState: any) => {
|
|||
})
|
||||
.catch();
|
||||
};
|
||||
|
||||
export const getContact = (setState: any) => {
|
||||
axios
|
||||
.get(contacts)
|
||||
.then((res) => {
|
||||
setState(res.data.data);
|
||||
})
|
||||
.catch();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,3 +15,5 @@ export const post: string = hosting + "/api/v1/posts"; // /id ? locale
|
|||
export const videos: string = hosting + "/api/v1/videos";
|
||||
|
||||
export const structure: string = hosting + "/api/v1/structure";
|
||||
|
||||
export const contacts: string = hosting + "/api/v1/contact-info";
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import SectionTitle from "../components/global/SectionTitle";
|
|||
|
||||
// Helpers
|
||||
import { getStructure } from "../helpers/apiRequests";
|
||||
import { highlightColor } from "../helpers/otherVariables";
|
||||
|
||||
// Links
|
||||
import { hosting } from "../links";
|
||||
|
|
@ -65,18 +66,42 @@ const Structure = () => {
|
|||
className="person-left"
|
||||
style={{ width: "100%", maxWidth: "40%" }}
|
||||
>
|
||||
<Skeleton height={"25rem"} width={"100%"} />
|
||||
<Skeleton
|
||||
height={"25rem"}
|
||||
width={"100%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="person-right"
|
||||
style={{ width: "100%", maxWidth: "60%" }}
|
||||
>
|
||||
<Skeleton height={"3.3rem"} width={"70%"} />
|
||||
<Skeleton height={"3.8rem"} width={"80%"} />
|
||||
<Skeleton
|
||||
height={"3.3rem"}
|
||||
width={"70%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"3.8rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<div className="person-right-bottom">
|
||||
<Skeleton height={"2.2rem"} width={"80%"} />
|
||||
<Skeleton height={"2.2rem"} width={"80%"} />
|
||||
<Skeleton height={"2.2rem"} width={"80%"} />
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
<Skeleton
|
||||
height={"2.2rem"}
|
||||
width={"80%"}
|
||||
highlightColor={highlightColor}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue