Spaces:
Running
Running
File size: 1,894 Bytes
47c0b4f 76197f0 47c0b4f 76197f0 47c0b4f 76197f0 47c0b4f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons'
import { useTheme } from '../context/themeContext'
import { Link } from 'react-router-dom'
import logoLightMode from '../assets/logo-light-mode.png'
import logoDarkMode from '../assets/logo-dark-mode.png'
const Appbar = () => {
const [checked, setChecked] = useState(false)
const { theme, toggleTheme } = useTheme()
const handleChange = () => {
setChecked(!checked)
toggleTheme()
}
return (
<div>
<div id='topbar' className='flex flew-row justify-between'>
<div className='flex items-center'>
<Link to='/'>
<img
src={theme === 'dark' ? logoDarkMode : logoLightMode}
alt='Logo'
style={{ height: '32px', marginLeft: '12px' }}
/>
</Link>
{/* <h3 className="text-xl mx-4">Deployments</h3> */}
{/* <Link to='/calculator'>
<h3 className='text-xl mx-4'>Calculator</h3>
</Link> */}
{/* <a href='https://docs.titanml.co/docs/intro'>
<h3 className='text-xl mx-4'>Docs</h3>
</a> */}
</div>
<div className='flex mr-4'>
<label className='toggle-switch'>
<input type='checkbox' checked={checked} onChange={handleChange} />
<span className='slider'>
<span className='slider-content'>
{checked ? (
<FontAwesomeIcon icon={faSun} id='sun-icon' />
) : (
<FontAwesomeIcon icon={faMoon} id='moon-icon' />
)}
</span>
</span>
</label>
</div>
</div>
<Outlet />
</div>
)
}
export default Appbar
|