Add brief about using Context

1 год назад · f6eadb0df7
--- a/public/photo.png
+++ b/public/photo.png
--- a/src/Person.ts
+++ b/src/Person.ts
@@ -0,0 +1,4 @@
 export const Person = {
    name: "David Hrdina Němeček",
    brief: "Software developer, people manager."
 };
--- a/src/app/components/AboutBrief.tsx
+++ b/src/app/components/AboutBrief.tsx
@@ -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>
    )
 }
--- a/src/app/components/PersonContext.tsx
+++ b/src/app/components/PersonContext.tsx
@@ -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>
    )
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -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>
  )
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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>
  )