Add brief about using Context
This commit is contained in:
parent
6b6a29714c
commit
f6eadb0df7
BIN
public/photo.png
Normal file
BIN
public/photo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
4
src/Person.ts
Normal file
4
src/Person.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export const Person = {
|
||||||
|
name: "David Hrdina Němeček",
|
||||||
|
brief: "Software developer, people manager."
|
||||||
|
};
|
15
src/app/components/AboutBrief.tsx
Normal file
15
src/app/components/AboutBrief.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React, { useContext } from 'react';
|
||||||
|
import Container from 'react-bootstrap/Container';
|
||||||
|
import Image from 'react-bootstrap/Image'
|
||||||
|
import { PersonContext } from './PersonContext';
|
||||||
|
|
||||||
|
export default function AboutBrief() {
|
||||||
|
const person = useContext(PersonContext)
|
||||||
|
return (
|
||||||
|
<Container className='about-brief'>
|
||||||
|
<Image alt='Photograph of the person' rounded={true} src='photo.png'></Image>
|
||||||
|
<h1>{person.name}</h1>
|
||||||
|
<p className='brief'>{person.brief}</p>
|
||||||
|
</Container>
|
||||||
|
)
|
||||||
|
}
|
14
src/app/components/PersonContext.tsx
Normal file
14
src/app/components/PersonContext.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
'use client'
|
||||||
|
import React from 'react';
|
||||||
|
import { createContext } from 'react';
|
||||||
|
import { Person } from '../../Person';
|
||||||
|
|
||||||
|
export const PersonContext = createContext(Person);
|
||||||
|
|
||||||
|
export function PersonProvider({ children }) {
|
||||||
|
return (
|
||||||
|
<PersonContext.Provider value={Person}>
|
||||||
|
{children}
|
||||||
|
</PersonContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
@ -2,11 +2,12 @@ import React from 'react'
|
|||||||
import { Inter } from 'next/font/google'
|
import { Inter } from 'next/font/google'
|
||||||
|
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
import { PersonProvider } from './components/PersonContext'
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
const inter = Inter({ subsets: ['latin'] })
|
||||||
|
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: 'David Hrdina Němeček | CV',
|
title: 'David Hrdina Němeček | CV.',
|
||||||
description: 'Curriculum Vitae',
|
description: 'Curriculum Vitae',
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,7 +18,11 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={inter.className}>{children}</body>
|
<body className={inter.className}>
|
||||||
|
<PersonProvider>
|
||||||
|
{children}
|
||||||
|
</PersonProvider>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -2,10 +2,13 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Container from 'react-bootstrap/Container';
|
import Container from 'react-bootstrap/Container';
|
||||||
import JobsHistory from './components/JobsHistory';
|
import JobsHistory from './components/JobsHistory';
|
||||||
|
import AboutBrief from './components/AboutBrief';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<Container fluid='xxl'>
|
<Container fluid='xxl'>
|
||||||
|
<AboutBrief></AboutBrief>
|
||||||
<JobsHistory></JobsHistory>
|
<JobsHistory></JobsHistory>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user