theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-05-29 22:37:44 +02:00
Code Issues Releases Activity

feat: add divlo.fr

Browse Source
This commit is contained in:
divlo
2021-04-18 01:56:23 +02:00
parent 3072daa443
commit c2f762ac68
134 changed files with 31003 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/Profile/ProfileList/ProfileItem.tsx Normal file
View File

@ -0,0 +1,79 @@
interface ProfileItemProps {
title: string
value: string
link?: string
}
export const ProfileItem: React.FC<ProfileItemProps> = props => {
const { title, value, link } = props
return (
<>
<li className='profile-list__item'>
<strong className='profile-list__item-title'>{title}</strong>
<span className='profile-list__item-info'>
{link != null ? (
<a className='profile-list__link' href={link}>
{value}
</a>
) : (
value
)}
</span>
</li>
<style jsx>
{`
.profile-list__item {
margin-bottom: 13px;
}
.profile-list__item::after,
.profile-list__item::before {
content: ' ';
display: table;
}
.profile-list__item::after {
clear: both;
}
.profile-list__item-title {
display: block;
width: 120px;
float: left;
color: #d4d4d5;
font-size: 12px;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
}
.profile-list__item-info {
display: block;
margin-left: 125px;
font-size: 15px;
font-weight: 400;
line-height: 20px;
color: #84898e;
}
.profile-list__link {
color: #84898e;
}
@media (max-width: 576px) {
.profile-list__item-title {
margin-bottom: 3px;
}
.profile-list__item-info {
margin-left: 0;
margin-bottom: 15px;
}
.profile-list__item-info,
.profile-list__item-title {
width: 100%;
float: none;
line-height: 1.2;
}
}
`}
</style>
</>
)
}

37
components/Profile/ProfileList/index.tsx Normal file
View File

@ -0,0 +1,37 @@
import useTranslation from 'next-translate/useTranslation'
import { ProfileItem } from './ProfileItem'
export const ProfileList: React.FC = () => {
const { t } = useTranslation('home')
return (
<>
<ul className='profile-list'>
<ProfileItem
title={t('home:about.birthDate')}
value='31/03/2003'
/>
<ProfileItem
title={t('home:about.nationality')}
value='Alsace, France'
/>
<ProfileItem
title='Email'
value='contact@divlo.fr'
link='mailto:contact@divlo.fr'
/>
</ul>
<style jsx>
{`
.profile-list {
margin: 0;
padding: 0;
list-style: none;
}
`}
</style>
</>
)
}