florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timeline: Use component

Browse source
This commit is contained in:
Florian RICHER 2023-06-03 18:26:08 +02:00
parent 92a9a931cb
commit c5d61f5466
7 changed files with 130 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/App.tsx
View file

@ -3,8 +3,11 @@ import TopComponent from "./components/TopComponent";
import ShortDescription from "./components/ShortDescription";
import Timeline from "./components/timeline/Timeline";
import TimelineElement from "./components/timeline/TimelineElement";
import {PROJECTS} from "./data/Project";
import TimelineCard from './components/timeline/TimelineElementCard';
import { PROJECTS } from "./data/Project";
import TimelineCard from './components/timeline/TimelineCard';
import TimelineCardSummary from './components/timeline/TimelineCardSummary';
import TimelineCardContent from './components/timeline/TimelineCardContent';
import TimelineLabel from './components/timeline/TimelineLabel';
function App() {
return (
@ -12,32 +15,58 @@ function App() {
<TopComponent></TopComponent>
<ShortDescription></ShortDescription>
<Timeline>
<TimelineElement category='2019-2020'>
<TimelineCard title='Limouzik'>
Youpi
<TimelineElement>
<TimelineLabel>2019-2020</TimelineLabel>
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
Youpi
</TimelineCardContent>
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
Youpi
</TimelineCardContent>
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
<strong>Youpi</strong>
</TimelineCardContent>
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
<strong>Youpi</strong>
</TimelineCardContent>
</TimelineCard>
</TimelineElement>
<TimelineElement category='2019-2020'>
<TimelineCard title='Limouzik'>
Youpi
<TimelineElement>
<TimelineLabel>2019-2020</TimelineLabel>
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
<strong>Youpi</strong>
</TimelineCardContent>
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
<strong>Youpi</strong>
</TimelineCardContent>
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
<strong>Youpi</strong>
</TimelineCardContent>
</TimelineCard>
<TimelineCard title='Limouzik'>
Youpi
<TimelineCard>
<TimelineCardSummary>Limouzik</TimelineCardSummary>
<TimelineCardContent>
<strong>Youpi</strong>
</TimelineCardContent>
</TimelineCard>
</TimelineElement>
</Timeline>

26
src/components/timeline/TimelineCard.tsx Normal file
View file

@ -0,0 +1,26 @@
import react, {Children, ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineCardProps = {
children: ReactNode
}
function TimelineCard({ children } : TimelineCardProps) {
let titles : ReactNode[] = []
let childrens : ReactNode[] = []
Children.forEach(children, (c) => {
if (c.type.name === "TimelineCardSummary") {
titles.push(c)
} else {
childrens.push(c)
}
});
return (
<details>
<summary>{titles}</summary>
<div>{childrens}</div>
</details>
)
}
export default TimelineCard

14
src/components/timeline/TimelineCardContent.tsx Normal file
View file

@ -0,0 +1,14 @@
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineCardContentProps = {
children: ReactNode
}
function TimelineCardContent({ children } : TimelineCardContentProps) {
return (
<>{children}</>
)
}
export default TimelineCardContent

14
src/components/timeline/TimelineCardSummary.tsx Normal file
View file

@ -0,0 +1,14 @@
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineCardSummaryProps = {
children: ReactNode
}
function TimelineCardSummary({ children } : TimelineCardSummaryProps) {
return (
<>{children}</>
)
}
export default TimelineCardSummary

20
src/components/timeline/TimelineElement.tsx
View file

@ -1,21 +1,27 @@
import './TimelineElement.scss'
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
import react, {Children, ReactNode} from 'react'
type TimelineElementProps = {
category: string,
children: ReactNode
}
function TimelineElement({ category, children } : TimelineElementProps) {
function TimelineElement({ children } : TimelineElementProps) {
let labels : ReactNode[] = []
let cards : ReactNode[] = []
Children.forEach(children, (c) => {
if (c.type.name === "TimelineLabel") {
labels.push(c)
} else {
cards.push(c)
}
});
return (
<li className='timeline-element'>
<div className='timeline-element__category'>
{ category }
{ labels }
</div>
<div className='timeline-element__info'>
{ children }
{ cards }
</div>
</li>
)

18
src/components/timeline/TimelineElementCard.tsx
View file

@ -1,18 +0,0 @@
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineElementCardProps = {
title: string,
children: ReactNode
}
function TimelineCard({ title, children } : TimelineElementCardProps) {
return (
<details>
<summary>{title}</summary>
<div>{children}</div>
</details>
)
}
export default TimelineCard

14
src/components/timeline/TimelineLabel.tsx Normal file
View file

@ -0,0 +1,14 @@
import react, {ReactNode} from 'react'
import Project from '../../data/Project'
type TimelineLabelProps = {
children: ReactNode
}
function TimelineLabel({ children } : TimelineLabelProps) {
return (
<>{children}</>
)
}
export default TimelineLabel