useSize hook for Accordion on small screens

This commit is contained in:
Dejvino 2023-05-27 06:54:35 +02:00
parent b810ea1151
commit c881021532
4 changed files with 107 additions and 27 deletions

View File

@ -5,26 +5,30 @@ import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row'; import Row from 'react-bootstrap/Row';
import JobCard from './JobCard'; import JobCard from './JobCard';
import { partition } from '../utils'; import { partition } from '../utils';
import { Jobs } from '@/PersonalDataTypes'; import { Job, Jobs } from '@/PersonalDataTypes';
import useSize from '../hooks/Size';
import { Accordion } from 'react-bootstrap';
export type Props = { type JobListProps = {
jobs: Jobs, jobs: Jobs,
heading: string,
entriesPerRow?: number, entriesPerRow?: number,
currentHeading?: string, currentHeading?: string,
} }
export type Props = {
heading: string,
} & JobListProps
const defaultProps = { const defaultProps = {
entriesPerRow: 2, entriesPerRow: 2,
currentHeading: 'Currently', currentHeading: 'Currently',
} }
export default function JobHistory(props: Props) { function FullList(props: JobListProps) {
const jobs = props.jobs const {jobs} = props
const config = {...defaultProps, ...props} const config = {...defaultProps, ...props}
return ( return (
<Container> <Container>
<h2>{config.heading}</h2>
{jobs.current && ( {jobs.current && (
<Row> <Row>
<Col> <Col>
@ -44,3 +48,47 @@ export default function JobHistory(props: Props) {
</Container> </Container>
) )
} }
function SmallList(props: JobListProps) {
const {jobs} = props
const config = {...defaultProps, ...props}
function jobTitle(job: Job) {
return `${job.position} at ${job.company}, ${job.timerange}`
}
return (
<Accordion defaultActiveKey={jobs.current ? 'current' : 'previous-0'} alwaysOpen>
{jobs.current && (
<Accordion.Item eventKey="current">
<Accordion.Header>{config.currentHeading}:<br />{jobTitle(jobs.current)} </Accordion.Header>
<Accordion.Body>
{jobs.current.position}
</Accordion.Body>
</Accordion.Item>
)}
{jobs.previous?.map((job, index) => (
<Accordion.Item eventKey={`previous-${index}`} key={index}>
<Accordion.Header>{jobTitle(job)}</Accordion.Header>
<Accordion.Body>
{job.description}
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
)
}
export default function JobHistory(props: Props) {
const {SizeWrapper, size} = useSize()
const jobs = props.jobs
const jobsList = size.width < 600 ? <SmallList {...props} /> : <FullList {...props} />
return (
<Container>
<h2>{props.heading}</h2>
<SizeWrapper>
{jobsList}
</SizeWrapper>
</Container>
)
}

View File

@ -17,7 +17,8 @@ body {
.tiny { .tiny {
font-size: 75%; font-size: 75%;
} }
h2, h3, h4 {
.container > h2, h3, h4 {
margin-top: 1em; margin-top: 1em;
} }

30
src/app/hooks/Size.tsx Normal file
View File

@ -0,0 +1,30 @@
import React, { ForwardedRef, ReactNode, forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
export default function useSize() {
const areaRef = useRef<HTMLDivElement>(null)
const [size, setSize] = useState({ width: 0, height: 0 })
function SizeWrapper(props: {children: ReactNode }) {
return (
<div ref={areaRef}>{props.children}</div>
)
}
useEffect(() => {
function updateSize() {
if (areaRef.current) {
setSize({
width: areaRef.current.offsetWidth,
height: areaRef.current.offsetHeight
})
}
}
updateSize()
addEventListener("resize", updateSize);
return () => {
removeEventListener("resize", updateSize)
};
}, [areaRef, setSize])
return {SizeWrapper, size}
}

View File

@ -1,5 +1,5 @@
'use client' 'use client'
import React from 'react'; import React, { ForwardedRef, ReactNode, RefObject, forwardRef } from 'react';
import Container from 'react-bootstrap/Container'; import Container from 'react-bootstrap/Container';
import AboutBrief from './components/AboutBrief'; import AboutBrief from './components/AboutBrief';
import Skills from './components/Skills'; import Skills from './components/Skills';
@ -9,6 +9,7 @@ import Education from './components/Education';
import { Col, Row } from 'react-bootstrap'; import { Col, Row } from 'react-bootstrap';
import Footer from './components/Footer'; import Footer from './components/Footer';
import Photo from './components/Photo'; import Photo from './components/Photo';
import useSize from './hooks/Size';
export default function Home() { export default function Home() {
return ( return (