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 './globals.css'
|
||||
import { PersonProvider } from './components/PersonContext'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata = {
|
||||
title: 'David Hrdina Němeček | CV',
|
||||
title: 'David Hrdina Němeček | CV.',
|
||||
description: 'Curriculum Vitae',
|
||||
}
|
||||
|
||||
@ -17,7 +18,11 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
<body className={inter.className}>
|
||||
<PersonProvider>
|
||||
{children}
|
||||
</PersonProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
@ -2,10 +2,13 @@
|
||||
import React from 'react';
|
||||
import Container from 'react-bootstrap/Container';
|
||||
import JobsHistory from './components/JobsHistory';
|
||||
import AboutBrief from './components/AboutBrief';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
||||
<Container fluid='xxl'>
|
||||
<AboutBrief></AboutBrief>
|
||||
<JobsHistory></JobsHistory>
|
||||
</Container>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user