DmitriyB/pixelstreamingwebreact
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

переписана структура футера, добавленны ссылки

Browse Source
This commit is contained in:
DmitriyB
2022-07-28 14:06:22 +05:00
parent e558c6d439
commit 27715e94df
4 changed files with 156 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/footer/contactValueContainer.tsx
+42
View File
@@ -0,0 +1,42 @@
import React, { useEffect, useState } from "react";
type TProps = {
type: 'a' | 'email' | 'phone' | 'text'
value: string
href?: string
}
export const ContactValueContainer:React.FC<TProps> = React.memo((props) => {
const [jsxValue, setJsxValue] = useState<JSX.Element>(<></>);
useEffect(() => {
switch(props.type) {
case 'a':
setJsxValue(
<a href={props?.href} target='_blank' rel="noreferrer noopener" className='contact-data-href'>{props.value}</a>
)
break;
case 'email':
setJsxValue(
<a href={`mailto: ${props.href}`} className='contact-data-href'>{props.value}</a>
)
break;
case 'phone':
setJsxValue(
<a href={`tel:${props.href}`} className='contact-data-href'>{props.value}</a>
)
break;
case 'text':
setJsxValue(
<span className="contact-data-text">{props.value}</span>
)
break;
}
}, [props.value, props.type, props?.href])
return <div className="contact-data-value-container">
<span className="contact-data-value">
{jsxValue}
</span>
</div>
})
src/components/footer/contactsContainer.tsx
+41 -13
View File
@@ -1,5 +1,6 @@
import React, { useContext } from "react";
import { ContextLang } from "../ContextLang";
import { ContactValueContainer } from "./contactValueContainer";
type TProps = {
title: {
@@ -8,17 +9,20 @@ type TProps = {
}
href?: string
pairData: Array<{
value1: {
ru: string,
en: string
} | string,
value2?: {
ru: string,
en: string
} | string
value1: ContactValueType
value2?: ContactValueType
}>
}
type ContactValueType = {
type: 'a' | 'email' | 'phone' | 'text'
value: {
ru: string,
en: string
} | string
href?: string
}
export const ContactContainer:React.FC<TProps> = React.memo((props) => {
const {lang} = useContext(ContextLang);
return <div className="contact-container">
@@ -28,13 +32,23 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
</div>
{
props.href
? <a href={`https://${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
// ? <a href={`https://${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
? <a href={`${props.href}`} target='_blank' rel="noreferrer noopener" className='contact-href'>{props.href}</a>
: null
}
<div className="contact-data-container">
{props.pairData.map(pair => {
return <div key={typeof(pair.value1) === 'string' ? pair.value1 : pair.value1[lang]} className="contact-data-row">
<div className="contact-data-value-container">
return <div key={typeof(pair.value1.value) === 'string' ? pair.value1.value : pair.value1.value[lang]} className="contact-data-row">
<ContactValueContainer
type={pair.value1.type}
value={
typeof(pair.value1.value) === 'string'
? pair.value1.value
: pair.value1.value[lang]
}
href={pair.value1?.href}
/>
{/* <div className="contact-data-value-container">
<span className="contact-data-value">
{
typeof(pair.value1) === 'string'
@@ -46,8 +60,22 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
: pair.value1[lang]
}
</span>
</div>
</div> */}
{
pair.value2?.type
? <ContactValueContainer
type={pair.value2.type}
value={
typeof(pair.value2.value) === 'string'
? pair.value2.value
: pair.value2.value[lang]
}
href={pair.value2?.href}
/>
: null
}
{/* {
pair?.value2
? <div className="contact-data-value-container">
<span className="contact-data-value">
@@ -63,7 +91,7 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
</span>
</div>
: null
}
} */}
</div>
})}
</div>
src/components/footer/footer.css
+6
View File
@@ -63,15 +63,21 @@
background-color: #979797;
}
.contact-data-text {
}
.contact-href,
a {
color: #FFFFFF;
transition: .2s;
text-decoration: none;
}
.contact-href:hover,
a:hover {
color: #CE56C2;
text-decoration: underline;
transition: .2s;
}
src/components/footer/footer.tsx
+67 -8
View File
@@ -12,11 +12,38 @@ export const Footer:React.FC = React.memo(() => {
<div className="footer-content-contacts-first-container">
<ContactContainer
title={LangDict.contactTitle}
href="graff.tech"
href="https://graff.tech"
pairData={[
{value1: LangDict.contactRus, value2: LangDict.contactUae},
{value1: 'info@graff.tech', value2: 'waseem@graff.tech'},
{value1: '+7 800 770 00 67', value2: '+971 50 983 8902'}
{
value1: {
type: "text",
value: LangDict.contactRus
},
value2: {
type: 'text',
value: LangDict.contactUae
}
},
{
value1: {
type: 'email',
value: 'info@graff.tech'
},
value2: {
type: 'email',
value: 'waseem@graff.tech'
}
},
{
value1: {
type: "phone",
value: '+7 800 770 00 67'
},
value2: {
type: "phone",
value: '+971 50 983 8902'
}
}
]}
/>
</div>
@@ -24,15 +51,47 @@ export const Footer:React.FC = React.memo(() => {
<ContactContainer
title={LangDict.socials}
pairData={[
{value1: 'Facebook', value2: 'Instagram'},
{value1: 'YouTube', value2: 'VK'}
{
value1: {
type: 'a',
value: 'Facebook',
href: 'https://www.facebook.com/GRAFFinteractive'
},
value2: {
type: 'a',
value: 'Instagram',
href: 'https://www.instagram.com/graffinteractive/'
}
},
{
value1: {
type: 'a',
value: 'YouTube',
href: 'https://www.youtube.com/channel/UCveYBNLVeGxgsDsfhrVxNoA'
},
value2: {
type: "a",
value: 'VK',
href: 'https://vk.com/graffinteractive'
}
}
]}
/>
<ContactContainer
title={LangDict.address}
pairData={[
{value1: LangDict.streetName},
{value1: LangDict.townName}
{
value1: {
type: "text",
value: LangDict.streetName
}
},
{
value1: {
type: "text",
value: LangDict.townName
}
}
]}
/>
</div>