Skip to content

Commit

Permalink
Add dark mode switcher and icons
Browse files Browse the repository at this point in the history
  • Loading branch information
siddg97 committed Feb 10, 2024
1 parent 81af12d commit d464efd
Show file tree
Hide file tree
Showing 8 changed files with 86 additions and 136 deletions.
4 changes: 4 additions & 0 deletions react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"prebuild": "yarn lint",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"test": "echo 'No tests for now'",
"test:ci": "echo 'No tests for now'",
"preview": "vite preview"
},
"dependencies": {
Expand All @@ -16,6 +19,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.2.1",
"use-dark-mode": "^2.3.1",
"usehooks-ts": "^2.13.0"
},
"devDependencies": {
Expand Down
23 changes: 13 additions & 10 deletions react/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import Navigation from "./components/Navigation.tsx";
import { useDarkMode } from 'usehooks-ts';
import Navigation from './components/Navigation.tsx';

function App() {
return (
<div className="w-full">
<Navigation/>
<main className="mt-6 flex w-full flex-col items-center">
Hello
</main>
</div>
)
const { isDarkMode } = useDarkMode();

return (
<main
className={`${isDarkMode ? 'dark' : ''} w-full min-h-screen p-2 text-foreground bg-background`}
>
<Navigation />
<div className='mt-6 flex w-full flex-col items-center'>Hello</div>
</main>
);
}

export default App
export default App;
128 changes: 17 additions & 111 deletions react/src/components/Navigation.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import { Icon } from '@iconify/react';
import {
Avatar,
Badge,
Button,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownTrigger,
Link,
Navbar,
NavbarBrand,
Expand All @@ -16,6 +8,7 @@ import {
NavbarMenuItem,
NavbarMenuToggle,
} from '@nextui-org/react';
import { ThemeSwitcher } from './ThemeSwitcher.tsx';

export default function Navigation() {
return (
Expand All @@ -29,16 +22,18 @@ export default function Navigation() {
>
<NavbarBrand>
<NavbarMenuToggle className='mr-2 h-6 sm:hidden' />
{/*<AcmeIcon/>*/}
<p className='font-bold text-inherit'>ACME</p>
<p className='font-bold text-inherit hidden sm:block text-sm sm:text-xl'>
Siddharth Gupta
</p>
<p className='font-bold text-inherit sm:hidden'>S.G.</p>
</NavbarBrand>
<NavbarContent
className='ml-4 hidden h-12 w-full max-w-fit gap-4 rounded-full bg-content2 px-4 dark:bg-content1 sm:flex'
justify='start'
>
<NavbarItem>
<Link className='flex gap-2 text-inherit' href='#'>
Dashboard
Home
</Link>
</NavbarItem>
<NavbarItem isActive>
Expand All @@ -47,22 +42,17 @@ export default function Navigation() {
className='flex gap-2 text-inherit'
href='#'
>
Deployments
Projects
</Link>
</NavbarItem>
<NavbarItem>
<Link className='flex gap-2 text-inherit' href='#'>
Analytics
Resume
</Link>
</NavbarItem>
<NavbarItem>
<Link className='flex gap-2 text-inherit' href='#'>
Team
</Link>
</NavbarItem>
<NavbarItem>
<Link className='flex gap-2 text-inherit' href='#'>
Settings
Contact
</Link>
</NavbarItem>
</NavbarContent>
Expand All @@ -71,119 +61,35 @@ export default function Navigation() {
justify='end'
>
<NavbarItem className='hidden sm:flex'>
<Button isIconOnly radius='full' variant='light'>
<Icon
className='text-default-500'
icon='solar:magnifer-linear'
width={22}
/>
</Button>
</NavbarItem>
<NavbarItem className='hidden sm:flex'>
<Button isIconOnly radius='full' variant='light'>
<Icon
className='text-default-500'
icon='solar:sun-linear'
width={24}
/>
</Button>
</NavbarItem>
<NavbarItem className='hidden sm:flex'>
<Button isIconOnly radius='full' variant='light'>
<Icon
className='text-default-500'
icon='solar:settings-linear'
width={24}
/>
</Button>
</NavbarItem>
{/*<NavbarItem className="flex">*/}
{/* <Popover offset={12} placement="bottom-end">*/}
{/* <PopoverTrigger>*/}
{/* <Button*/}
{/* disableRipple*/}
{/* isIconOnly*/}
{/* className="overflow-visible"*/}
{/* radius="full"*/}
{/* variant="light"*/}
{/* >*/}
{/* <Badge color="danger" content="5" showOutline={false} size="md">*/}
{/* <Icon className="text-default-500" icon="solar:bell-linear" width={22}/>*/}
{/* </Badge>*/}
{/* </Button>*/}
{/* </PopoverTrigger>*/}
{/* <PopoverContent className="max-w-[90vw] p-0 sm:max-w-[380px]">*/}
{/* <NotificationsCard className="w-full shadow-none"/>*/}
{/* </PopoverContent>*/}
{/* </Popover>*/}
{/*</NavbarItem>*/}
<NavbarItem className='px-2'>
<Dropdown placement='bottom-end'>
<DropdownTrigger>
<button className='mt-1 h-8 w-8 outline-none transition-transform'>
<Badge
className='border-transparent'
color='success'
content=''
placement='bottom-right'
shape='circle'
size='sm'
>
<Avatar
size='sm'
src='https://i.pravatar.cc/150?u=a04258114e29526708c'
/>
</Badge>
</button>
</DropdownTrigger>
<DropdownMenu aria-label='Profile Actions' variant='flat'>
<DropdownItem key='profile' className='h-14 gap-2'>
<p className='font-semibold'>Signed in as</p>
<p className='font-semibold'>johndoe@example.com</p>
</DropdownItem>
<DropdownItem key='settings'>My Settings</DropdownItem>
<DropdownItem key='team_settings'>Team Settings</DropdownItem>
<DropdownItem key='analytics'>Analytics</DropdownItem>
<DropdownItem key='system'>System</DropdownItem>
<DropdownItem key='configurations'>Configurations</DropdownItem>
<DropdownItem key='help_and_feedback'>
Help & Feedback
</DropdownItem>
<DropdownItem key='logout' color='danger'>
Log Out
</DropdownItem>
</DropdownMenu>
</Dropdown>
<ThemeSwitcher />
</NavbarItem>
</NavbarContent>

{/* Mobile Menu */}
<NavbarMenu>
<NavbarMenuItem>
<Link className='w-full' color='foreground' href='#'>
Dashboard
Home
</Link>
</NavbarMenuItem>
<NavbarMenuItem isActive>
<Link aria-current='page' className='w-full' color='primary' href='#'>
Deployments
Projects
</Link>
</NavbarMenuItem>
<NavbarMenuItem>
<Link className='w-full' color='foreground' href='#'>
Analytics
Resume
</Link>
</NavbarMenuItem>
<NavbarMenuItem>
<Link className='w-full' color='foreground' href='#'>
Team
</Link>
</NavbarMenuItem>
<NavbarMenuItem>
<Link className='w-full' color='foreground' href='#'>
Settings
Contact
</Link>
</NavbarMenuItem>
<NavbarItem className='hidden sm:flex'>
<ThemeSwitcher />
</NavbarItem>
</NavbarMenu>
</Navbar>
);
Expand Down
19 changes: 19 additions & 0 deletions react/src/components/ThemeSwitcher.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Icon } from '@iconify/react';
import { Button } from '@nextui-org/react';
import { useDarkMode } from 'usehooks-ts';

function ThemeSwitcher() {
const { isDarkMode, toggle } = useDarkMode();

return (
<Button isIconOnly radius='full' variant='light' onClick={toggle}>
{isDarkMode ? (
<Icon className='text-default-500' icon='solar:sun-linear' width={24} />
) : (
<Icon className='text-default-500' icon='solar:moon-stars-linear' width={24} />
)}
</Button>
);
}

export { ThemeSwitcher };
1 change: 1 addition & 0 deletions react/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './Navigation';
22 changes: 11 additions & 11 deletions react/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { NextUIProvider } from "@nextui-org/react";
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { NextUIProvider } from '@nextui-org/react';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<NextUIProvider>
<App/>
</NextUIProvider>
</React.StrictMode>,
)
<React.StrictMode>
<NextUIProvider>
<App />
</NextUIProvider>
</React.StrictMode>
);
5 changes: 1 addition & 4 deletions react/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ export default {
},
darkMode: 'class',
plugins: [
nextui({
defaultTheme: 'dark',
defaultExtendTheme: 'dark',
}),
nextui(),
],
};
20 changes: 20 additions & 0 deletions react/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2379,6 +2379,11 @@
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==

"@use-it/event-listener@^0.1.2":
version "0.1.7"
resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.7.tgz#443a9b6df87f2f2961b74d42997ce723a7078623"
integrity sha512-hgfExDzUU9uTRTPDCpw2s9jWTxcxmpJya3fK5ADpf5VDpSy8WYwY/kh28XE0tUcbsljeP8wfan48QvAQTSSa3Q==

"@vitejs/plugin-react@^4.2.1":
version "4.2.1"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz#744d8e4fcb120fc3dbaa471dadd3483f5a304bb9"
Expand Down Expand Up @@ -4897,6 +4902,14 @@ use-composed-ref@^1.3.0:
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==

use-dark-mode@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/use-dark-mode/-/use-dark-mode-2.3.1.tgz#d506349c7b7e09e9977cb8a6ab4470896aa3779a"
integrity sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==
dependencies:
"@use-it/event-listener" "^0.1.2"
use-persisted-state "^0.3.0"

use-isomorphic-layout-effect@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
Expand All @@ -4909,6 +4922,13 @@ use-latest@^1.2.1:
dependencies:
use-isomorphic-layout-effect "^1.1.1"

use-persisted-state@^0.3.0:
version "0.3.3"
resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.3.tgz#5e0f2236967cec7c34de33abc07ae6818e7c7451"
integrity sha512-pCNlvYC8+XjRxwnIut4teGC9f2p9aD88R8OGseQGZa2dvqG/h1vEGk1vRE1IZG0Vf161UDpn+NlW4+UGubQflQ==
dependencies:
"@use-it/event-listener" "^0.1.2"

use-sidecar@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
Expand Down

0 comments on commit d464efd

Please sign in to comment.