Skip to content

Commit 92e98d0

Browse files
NoamiliNoamili
authored
Merge branch 'Pull-Request-Community:staging' into staging
2 parents 69caacd + b9dd209 commit 92e98d0

11 files changed

+131
-52
lines changed

‎components/description/description.module.scss

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎components/descriptionContainer/DescriptionContainer.module.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.container {
2+
display: flex;
3+
justify-content: center;
4+
background-color: var(--background-description);
5+
box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.2);
6+
}

‎components/description/Description.tsx renamed to ‎components/descriptionContainer/DescriptionContainer.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useEffect, useRef, useState } from 'react';
2-
import style from './description.module.scss';
3-
import colors from '../../styles/colors';
2+
import style from './DescriptionContainer.module.scss';
43

5-
const Description = ({ descriptionOutput, descriptionHeight }) => {
4+
const DescriptionContainer = (props) => {
5+
const { children, descriptionHeight } = props;
66
const myRef = useRef(null);
77
const [height, setHeight] = useState(0);
88

99
useEffect(() => {
1010
descriptionHeight(height);
11-
}, [descriptionHeight, height]);
11+
}, [height]);
1212

1313
useEffect(() => {
1414
const handleResize = () => {
@@ -23,9 +23,9 @@ const Description = ({ descriptionOutput, descriptionHeight }) => {
2323

2424
return (
2525
<div ref={myRef} id="container" className={style.container}>
26-
{descriptionOutput}
26+
{children}
2727
</div>
2828
);
2929
};
3030

31-
export default Description;
31+
export default DescriptionContainer;

‎components/layout/layout.module.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.description {
2+
height: max-content;
3+
display: flex;
4+
flex-direction: column;
5+
font-size: 1rem; // Based on 16px.
6+
gap: 20px;
7+
padding: 136px 0 114px;
8+
margin: 0 auto;
9+
width: 1280px;
10+
11+
@media only screen and (max-width: 1280px) {
12+
padding: 136px 24px 114px;
13+
}
14+
15+
@media only screen and (max-width: 768px) {
16+
padding: 136px 24px 80px;
17+
margin: 0 auto;
18+
max-width: 1280px;
19+
}
20+
}

‎components/layout/layout.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ import Head from 'next/head';
33
import { getMetaData } from '../../services/metaData';
44
import Navbar from './navbar/navbar';
55
import Footer from './footer/footer';
6-
import Description from '../description/Description';
76
import { useState } from 'react';
7+
import DescriptionContainer from '../descriptionContainer/DescriptionContainer';
8+
import style from './layout.module.scss';
89

9-
const Layout = ({ children, descriptionText }: LayoutProps) => {
10+
const Layout = ({ children, descriptionContent }: LayoutProps) => {
1011
const currentRoute = useRouter().pathname;
1112
const { title, metaContents } = getMetaData(currentRoute);
1213
const [currentHeight, setCurrentHeight] = useState(0);
1314

1415
return (
15-
<div>
16+
<>
1617
<Head>
1718
<link rel="icon" href="/favicon.png" />
1819
<meta property="image" content="/images/logo.png" />
@@ -22,21 +23,22 @@ const Layout = ({ children, descriptionText }: LayoutProps) => {
2223
{metaContents && metaContents.map((meta, i) => <meta key={i} {...meta} />)}
2324
</Head>
2425
<Navbar DesHeight={currentHeight} />
25-
<Description
26-
descriptionOutput={descriptionText}
26+
<DescriptionContainer
2727
descriptionHeight={(hight) => {
2828
setCurrentHeight(hight);
2929
}}
30-
/>
31-
<div className="layout__container layout__body--container">{children}</div>
30+
>
31+
<div className={style.description}>{descriptionContent}</div>
32+
</DescriptionContainer>
33+
{children}
3234
<Footer />
33-
</div>
35+
</>
3436
);
3537
};
3638

3739
interface LayoutProps {
3840
children: object;
39-
descriptionText?: object;
41+
descriptionContent?: object;
4042
}
4143

4244
export default Layout;

‎components/searchBar/SearchBar.language.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"searchBarPlaceholder": "Search"
3+
}

‎components/searchBar/SearchBar.module.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.textBoxContainer {
2+
display: flex;
3+
align-items: center;
4+
padding: 0 16px;
5+
gap: 8px;
6+
border: solid 1px #bfc0c3;
7+
max-width: 313px;
8+
height: 40px;
9+
border-radius: 8px;
10+
background-color: white;
11+
margin: 100px;
12+
}
13+
14+
.textBox {
15+
border: none;
16+
width: 100%;
17+
direction: ltr;
18+
color: #bfc0c2;
19+
font-size: 1.25rem;
20+
font-weight: 400;
21+
line-height: 26.16px;
22+
}

‎components/searchBar/SearchBar.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { useCallback, ReactElement } from 'react';
2+
import { useTranslator } from '../language/useTranslator';
3+
import languageFile from './SearchBar.language.json';
4+
import styles from './SearchBar.module.scss';
5+
6+
interface Props {
7+
handelSearch: (searchTerm: string) => void;
8+
placeholder?: string;
9+
}
10+
11+
const debounce = (callback, delay) => {
12+
let timer;
13+
return (...args) => {
14+
clearTimeout(timer);
15+
timer = setTimeout(() => callback(...args), delay);
16+
};
17+
};
18+
19+
const SearchBar = (props: Props): ReactElement => {
20+
const { handelSearch, placeholder } = props;
21+
const searchPlaceholder = useTranslator('searchBarPlaceholder', languageFile);
22+
23+
const debounceHandler = useCallback(debounce(handelSearch, 1000), []);
24+
25+
const handleOnChange = async (event) => {
26+
const { value } = event.currentTarget;
27+
debounceHandler(value);
28+
};
29+
30+
return (
31+
<div className={styles.textBoxContainer}>
32+
<input
33+
onChange={handleOnChange}
34+
type="text"
35+
placeholder={placeholder ? placeholder : searchPlaceholder}
36+
className={styles.textBox}
37+
/>
38+
<svg
39+
width="20"
40+
height="20"
41+
viewBox="0 0 20 20"
42+
fill="none"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path
46+
d="M8.55295 17.105C10.5265 17.105 12.3408 16.4261 13.7884 15.3004L18.4883 20L20 18.4883L15.3002 13.7888C16.427 12.3402 17.1059 10.526 17.1059 8.55249C17.1059 3.83686 13.2688 0 8.55295 0C3.83707 0 0 3.83686 0 8.55249C0 13.2681 3.83707 17.105 8.55295 17.105ZM8.55295 2.13812C12.0907 2.13812 14.9677 5.01497 14.9677 8.55249C14.9677 12.09 12.0907 14.9669 8.55295 14.9669C5.01523 14.9669 2.13824 12.09 2.13824 8.55249C2.13824 5.01497 5.01523 2.13812 8.55295 2.13812Z"
47+
fill="#BFC0C3"
48+
/>
49+
</svg>
50+
</div>
51+
);
52+
};
53+
54+
export default SearchBar;

‎pages/articles.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { GetStaticProps } from 'next';
2-
import Description from '../components/description/Description';
32
import Layout from '../components/layout/layout';
4-
import { PersonCard } from '../components/personCard/personCard';
53
import { getPeople, IPerson } from '../services/people';
6-
import styles from '../styles/Home.module.scss';
74
import { randomShuffle } from '../utils/randomShuffle';
85
interface IHomeProps {
96
people: IPerson[];
@@ -12,7 +9,7 @@ interface IHomeProps {
129
export default function Articles({ people }: IHomeProps) {
1310
return (
1411
<Layout>
15-
<div className={styles.container}>Scafolding for article page</div>
12+
<div>Scafolding for article page</div>
1613
</Layout>
1714
);
1815
}

‎pages/index.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ interface IHomeProps {
1212

1313
export default function Home({ people }: IHomeProps) {
1414
return (
15-
<Layout descriptionText={MainPageDescription()}>
16-
<div className={styles.cards__wrapper}>
17-
{people.map((person, i) => (
18-
<PersonCard key={person.name + i} person={person} />
19-
))}
15+
<Layout descriptionContent={<MainPageDescription/>}>
16+
<div className={styles.container}>
17+
<div className={styles.cards__wrapper}>
18+
{people.map((person, i) => (
19+
<PersonCard key={person.name + i} person={person} />
20+
))}
21+
</div>
2022
</div>
2123
</Layout>
2224
);

‎pages/projects.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import next from 'next';
22
import React, { useState } from 'react';
3-
import Description from '../components/description/Description';
43
import Navbar from '../components/layout/navbar/navbar';
54
import style from '../styles/projects.module.scss';
65
import ProjectPage from '../components/projectPage/projectPage';
@@ -12,7 +11,7 @@ export default function Vast() {
1211
console.log(currentHeight);
1312

1413
return (
15-
<Layout descriptionText={ProjectPage()}>
14+
<Layout descriptionContent={<ProjectPage/>}>
1615
<h1>projects</h1>
1716
</Layout>
1817
);

0 commit comments

Comments
 (0)