ReactMarkap/src/App.js

import './assets/scss/_page-styles/companies-list.scss';

const HeaderLink = ({linkHref, children}) =>
	<li className="header__nav-item">
		<a className="header__nav-link"
		   href={linkHref}
		>{children}</a>
	</li>

const FooterLink = ({linkHref, children}) =>
	<li className="footer__menu-item">
		<a className="footer__link"
		   href={linkHref}
		>{children}</a>
	</li>

const Header = () =>
	<header className="header">
		<div className="wrapper header__wrapper">
			<a className="header__logo-link"
			   href="/"
			>
				<img alt="Site Logo"
				     src="/images/companies/logo.svg"
				/>
			</a>
			<nav className="header__nav">
				<ul className="header__nav-items">
					<HeaderLink linkHref="/about">Про проект</HeaderLink>
					<HeaderLink linkHref="/faq">FAQ</HeaderLink>
				</ul>
			</nav>
			<label className="visually-hidden"
			       htmlFor="language-select"
			>Оберіть мову</label>
			<div className="custom-select header__lang-select">
				<select id="language-select"
				        className="custom-select__select"
				>
					<option value="uk">UA</option>
					<option value="en">EN</option>
					<option value="ru">RU</option>
					<option value="am">AM</option>
				</select>
			</div>
			<button className="hamburger hamburger--spin header__hamburger js-hamburger"
			        type="button"
			        aria-expanded="false"
			        aria-label="Open the menu"
			>
	            <span className="hamburger-box">
	                <span className="hamburger-inner"></span>
	            </span>
			</button>
		</div>
	</header>

const Footer = () =>
	<footer className="footer">
		<div className="wrapper footer__wrapper">
			<ul className="footer__menu">
				<FooterLink linkHref="/">Головна</FooterLink>
				<FooterLink linkHref="/about">Про проект</FooterLink>
				<FooterLink linkHref="/faq">FAQ</FooterLink>
				<FooterLink linkHref="/discussions">Обговорення</FooterLink>
				<FooterLink linkHref="/alternatives">Альтернативи</FooterLink>
				<FooterLink linkHref="/roadmap">Технічні плани по проекту або Roadmap</FooterLink>
			</ul>
			<small className="footer__copyright">&copy; DevSpace 2020</small>
		</div>
	</footer>

const Search = () =>
	<div className="search companies__search">
		<label className="visually-hidden"
		       htmlFor="company-search"
		>Пошук компанії по назві</label>
		<button className="custom-btn custom-btn--blue search__button" type="button">
			<svg className="custom-icon search__button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlSpace="preserve"><path fillRule="evenodd" clipRule="evenodd" d="M321.9 374.7c-33.1 22.8-73.2 36.2-116.4 36.2C92 410.9 0 318.9 0 205.4 0 92 92 0 205.4 0c113.5 0 205.4 92 205.4 205.4 0 43.2-13.4 83.4-36.2 116.4L512 459.2 459.2 512 321.9 374.7zm-116.4-38.5c72.2 0 130.7-58.5 130.7-130.7 0-72.2-58.5-130.7-130.7-130.7-72.2 0-130.7 58.5-130.7 130.7-.1 72.1 58.5 130.7 130.7 130.7z"/></svg>
			<span className="search__button-text">Знайти компанію</span>
		</button>
		<input id="company-search"
		       className="search__input"
		       type="text"
		       placeholder="Назва компанії"
		/>
	</div>

const FlagIcon = ({countryCode}) =>
	<img className="custom-icon company-preview__country-flag"
	     alt={`flag ${countryCode} icon`}
	     src={`/images/flags/${countryCode}.svg`}
	/>

const CompanyCard = ({
	companyLogo,
	logoAlt,
	companyHref = "#",
	companyName,
	companyType = "Аутсорс компанія",
	companySiteUrl,
	children
}) =>
	<div className="companies__list-item company-preview">
		<figure className="company-preview__logo-overlay">
			<img className="company-preview__logo"
			     src={`/images/logos/${companyLogo}`}
			     alt={logoAlt}
			/>
		</figure>
		<h2 className="company-preview__company-name">
			{/* eslint-disable-next-line */}
			<a className="company-preview__company-link" href={companyHref}>{companyName}</a>
		</h2>
		<p className="company-preview__type">
			<img className="custom-icon company-preview__type-icon"
			     alt="search icon"
			     src="/images/companies/badge.svg"
			/>
			{companyType}
		</p>
		<p className="company-preview__site">
			<img className="custom-icon company-preview__site-icon"
			     alt="site icon"
			     src="/images/companies/site.svg"
			/>
			<a className="company-preview__site-url"
			   href={companySiteUrl}
			   target="_blank"
			   rel="noreferrer"
			>{companySiteUrl}</a>
		</p>
		<div className="company-preview__offices">
			<img className="custom-icon company-preview__offices-icon"
			     alt="flag icon"
			     src="/images/companies/flag.svg"
			/>
			<span className="company-preview__offices-text">Офіси компанії:</span>
			<div className="company-preview__country-flags">
				{children}
			</div>
		</div>
	</div>

const ShowMore = () =>
	<button className="custom-btn custom-btn--border-gray companies__btn-more"
	        type="button"
	>
		<svg className="custom-icon companies__btn-more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlSpace="preserve"><path d="M29.3 291.4C25.8 163 128.7 57.8 256.4 57.8V12.7c0-11.4 13.6-16.9 21.4-8.8l70.6 70.4c5 5 5 12.9 0 17.9l-70.6 70.4c-7.8 8.1-21.4 2.3-21.4-8.8v-45.4c-98.4 0-177.9 80.2-176.6 179.1 1.3 93.8 80.2 172.8 174.1 174.1C352.5 462.9 433 383.4 433 285c0-40.6-13.9-78.2-37.3-108-7.8-10.1-7.1-24.2 2-33.3 10.8-10.6 28.5-9.8 37.8 2 30 38.3 47.9 86.8 47.9 139.3 0 127.4-105.2 230.6-233.6 227.1-118.3-3.5-217.2-102.4-220.5-220.7z"/></svg>
		Показати ще 6 компаній
	</button>

const App = () =>
	<>
		<Header/>
		<main className="main-wrapper">
			<section className="companies">
				<div className="wrapper companies__wrapper">

					<Search/>

					<p className="companies__found">Знайдено компаній: 381</p>

					{/* Companies list */}
					<div className="companies__list">

						<CompanyCard companyLogo="levi9-logo.png"
						             logoAlt="Levi9"
						             companyName="Levi9"
						             companySiteUrl="https://www.levi9.com/"
						>
							<FlagIcon countryCode="nl"/>
							<FlagIcon countryCode="rs"/>
							<FlagIcon countryCode="ro"/>
							<FlagIcon countryCode="ua"/>
						</CompanyCard>

						<CompanyCard companyLogo="globallogic-logo.svg"
						             logoAlt="globallogic"
						             companyName="GlobalLogic"
						             companySiteUrl="https://www.globallogic.com/ua"
						>
							<FlagIcon countryCode="us"/>
							<FlagIcon countryCode="ua"/>
						</CompanyCard>

						<CompanyCard companyLogo="issoft-logo.png"
						             logoAlt="issoft"
						             companyName="ISsoft"
						             companyType="Продуктова компанія"
						             companySiteUrl="https://issoft.by/"
						>
							<FlagIcon countryCode="us"/>
							<FlagIcon countryCode="by"/>
						</CompanyCard>

						<CompanyCard companyLogo="dataart-logo.png"
						             logoAlt="DataArt"
						             companyName="DataArt"
						             companySiteUrl="https://dataart.ua/"
						>
							<FlagIcon countryCode="ua"/>
							<FlagIcon countryCode="am"/>
							<FlagIcon countryCode="bg"/>
							<FlagIcon countryCode="pl"/>
						</CompanyCard>

						<CompanyCard companyLogo="zone3000-logo.jpg"
						             logoAlt="zone3000"
						             companyName="ZONE3000"
						             companyType="Продуктова компанія"
						             companySiteUrl="https://zone3000.net/"
						>
							<FlagIcon countryCode="ua"/>
						</CompanyCard>

						<CompanyCard companyLogo="genesis-logo.png"
						             logoAlt="genesis"
						             companyName="Genesis"
						             companySiteUrl="https://gen.tech/"
						>
							<FlagIcon countryCode="us"/>
							<FlagIcon countryCode="by"/>
						</CompanyCard>

					</div>
					{/* /Companies list */}

					{/* Show more button */}
					<ShowMore/>
					{/* /Show more button */}

				</div>
			</section>
		</main>
		<Footer/>
	</>

export default App;