theoludwig/.profile
1
1
Fork 0
mirror of https://github.com/theoludwig/theoludwig.git synced 2025-11-04 00:19:01 +01:00
Code Issues Releases Activity

feat: add light mode + rewrite in Tailwind CSS (#15)

Browse Source
This commit is contained in:
Divlo
2021-05-08 19:52:04 +02:00
committed by GitHub
parent 26f24329c7
commit c62e66a86a
83 changed files with 5803 additions and 7623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/Interests/InterestsList/InterestItem.tsx
View File

@@ -1,41 +1,20 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
import { Tooltip } from 'components/design/Tooltip'
interface InterestItemProps {
title: string
fontAwesomeIcon: IconDefinition
}
export const InterestItem: React.FC<InterestItemProps> = props => {
export const InterestItem: React.FC<InterestItemProps> = (props) => {
const { fontAwesomeIcon, title } = props
return (
<>
<li className='interest-item'>
<Tooltip title={title}>
<FontAwesomeIcon
className='color-primary'
style={{
cursor: 'pointer',
height: '100%',
width: '100%',
display: 'block'
}}
icon={fontAwesomeIcon}
/>
</Tooltip>
</li>
<style jsx>
{`
.interest-item {
margin: 7px 5px;
width: 34px;
height: 34px;
}
`}
</style>
</>
<li className='interest-item my-2 mx-2 w-8 h-8' title={title}>
<FontAwesomeIcon
className='text-yellow cursor-pointer h-full w-full block dark:text-yellow-dark'
icon={fontAwesomeIcon}
/>
</li>
)
}

49
components/Interests/InterestsList/index.tsx
View File

@@ -5,41 +5,18 @@ import { InterestItem } from './InterestItem'
export const InterestsList: React.FC = () => {
return (
<>
<div className='container-list'>
<ul className='interests-list'>
<InterestItem
title='Developer Full Stack Junior'
fontAwesomeIcon={faCode}
/>
<InterestItem
title='Passionate about High-Tech'
fontAwesomeIcon={faMicrochip}
/>
<InterestItem
title='Open-Source enthusiast'
fontAwesomeIcon={faGit}
/>
</ul>
</div>
<style jsx>
{`
.container-list {
display: flex;
justify-content: center;
margin: 15px 0 15px 0;
}
.interests-list {
display: flex;
justify-content: space-around;
padding: 0;
margin: 0;
width: 60%;
list-style: none;
}
`}
</style>
</>
<div className='flex justify-center my-4'>
<ul className='flex justify-around p-0 m-0 list-none w-96'>
<InterestItem
title='Developer Full Stack Junior'
fontAwesomeIcon={faCode}
/>
<InterestItem
title='Passionate about High-Tech'
fontAwesomeIcon={faMicrochip}
/>
<InterestItem title='Open-Source enthusiast' fontAwesomeIcon={faGit} />
</ul>
</div>
)
}