dejvino/cv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add brief about using Context

Browse Source
This commit is contained in:
Dejvino 2023-05-24 09:24:20 +02:00
parent 6b6a29714c
commit f6eadb0df7
6 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/photo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

4
src/Person.ts Normal file
View 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
View 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
View 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>
)
}

9
src/app/layout.tsx
View File

@ -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>
)
}

3
src/app/page.tsx
View File

@ -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>
)