-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add more components and features
- Loading branch information
Showing
50 changed files
with
1,716 additions
and
150 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,56 @@ | ||
| import { ActionIcon, Anchor, Box, Card, Group } from '@mantine/core' | ||
| import { UiContainer, UiLogoType, useUiColorScheme, useUiTheme } from '@pubkey-ui/core' | ||
| import { IconMoon, IconSun } from '@tabler/icons-react' | ||
| import { Avatar, Group, rem } from '@mantine/core' | ||
| import { UiHeader, UiLayout, UiMenu, UiThemeSwitch } from '@pubkey-ui/core' | ||
| import { IconSettings, IconUser, IconUserCog } from '@tabler/icons-react' | ||
| import { ReactNode } from 'react' | ||
| import { AccountChecker } from './features/account/account-ui' | ||
| import { ClusterChecker, ClusterUiSelect } from './features/cluster/cluster-ui' | ||
| import { ClusterChecker } from './features/cluster/cluster-ui' | ||
|
|
||
| export function AppLayout({ children }: { children: ReactNode }) { | ||
| const { Link } = useUiTheme() | ||
| return ( | ||
| <Box> | ||
| <Card p="0" display="block"> | ||
| <UiContainer py="sm"> | ||
| <Group justify="space-between"> | ||
| <Group align="center"> | ||
| <Anchor component={Link} to="/" display="flex"> | ||
| <UiLogoType height={32} /> | ||
| </Anchor> | ||
| <Anchor component={Link} to="/dashboard"> | ||
| Dashboard | ||
| </Anchor> | ||
| <Anchor component={Link} to="/account"> | ||
| Account | ||
| </Anchor> | ||
| <Anchor component={Link} to="/demo"> | ||
| Demo | ||
| </Anchor> | ||
| <Anchor component={Link} to="/dev"> | ||
| Dev | ||
| </Anchor> | ||
| </Group> | ||
| <UiLayout | ||
| header={ | ||
| <UiHeader | ||
| links={[ | ||
| { label: 'Dashboard', link: '/dashboard' }, | ||
| { label: 'Account', link: '/account' }, | ||
| { label: 'Demo', link: '/demo' }, | ||
| { label: 'Dev', link: '/dev' }, | ||
| ]} | ||
| profile={ | ||
| <Group> | ||
| <ClusterUiSelect /> | ||
| <ThemeToggle /> | ||
| <UiThemeSwitch /> | ||
| <UiMenu | ||
| position="bottom-end" | ||
| withArrow | ||
| arrowOffset={14} | ||
| icon={ | ||
| <Avatar src="https://avatars.githubusercontent.com/u/36491?v=4" size={32}> | ||
| <IconUser /> | ||
| </Avatar> | ||
| } | ||
| items={[ | ||
| { label: 'Account', type: 'label' }, | ||
| { | ||
| label: 'Settings', | ||
| type: 'item', | ||
| leftSection: <IconSettings style={{ width: rem(14), height: rem(14) }} />, | ||
| }, | ||
| { | ||
| label: 'Profile', | ||
| type: 'item', | ||
| leftSection: <IconUserCog style={{ width: rem(14), height: rem(14) }} />, | ||
| }, | ||
| ]} | ||
| /> | ||
| </Group> | ||
| </Group> | ||
| </UiContainer> | ||
| </Card> | ||
| } | ||
| /> | ||
| } | ||
| > | ||
| <ClusterChecker> | ||
| <AccountChecker /> | ||
| </ClusterChecker> | ||
| {children} | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| function ThemeToggle() { | ||
| const { toggleColorScheme, colorScheme } = useUiColorScheme() | ||
|
|
||
| return ( | ||
| <Group justify="center"> | ||
| <ActionIcon onClick={() => toggleColorScheme()} variant="default" size="xl" aria-label="Toggle color scheme"> | ||
| {colorScheme === 'dark' ? <IconSun stroke={1.5} /> : <IconMoon stroke={1.5} />} | ||
| </ActionIcon> | ||
| </Group> | ||
| </UiLayout> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import { ActionIcon, Avatar, Button, Group, rem, Text } from '@mantine/core' | ||
| import { useDisclosure } from '@mantine/hooks' | ||
| import { UiCard, UiHeader, UiMenu, UiSearchInput, UiStack } from '@pubkey-ui/core' | ||
| import { | ||
| IconDoorExit, | ||
| IconLetterP, | ||
| IconMessageCircle, | ||
| IconPhoto, | ||
| IconSearch, | ||
| IconSettings, | ||
| IconUser, | ||
| IconUserCog, | ||
| } from '@tabler/icons-react' | ||
| import { useState } from 'react' | ||
| import { Route, Routes } from 'react-router-dom' | ||
|
|
||
| export function DemoFeatureHeader() { | ||
| const [opened, { toggle }] = useDisclosure(false) | ||
| const [signedIn, setSignedIn] = useState(false) | ||
| return ( | ||
| <UiCard title="Header"> | ||
| <UiStack gap="xl"> | ||
| <UiHeader | ||
| base="/demo/header" | ||
| opened={opened} | ||
| toggle={toggle} | ||
| links={[ | ||
| { link: '/demo/header/about', label: 'Features' }, | ||
| { link: '/demo/header/pricing', label: 'Pricing' }, | ||
| { link: '/demo/header/learn', label: 'Learn' }, | ||
| ]} | ||
| profile={<UiSearchInput text={{ size: 'sm' }} />} | ||
| /> | ||
| <UiHeader | ||
| profile={ | ||
| <ActionIcon radius="xl" size="lg" variant="light"> | ||
| <IconSearch style={{ width: rem(16), height: rem(16) }} stroke={1.5} /> | ||
| </ActionIcon> | ||
| } | ||
| /> | ||
| <UiHeader | ||
| base="/demo/header" | ||
| logo={ | ||
| <Group gap={6}> | ||
| <IconLetterP size={28} /> | ||
| <Text size="xl" fw="bold"> | ||
| PubKey | ||
| </Text> | ||
| </Group> | ||
| } | ||
| logoSmall={<IconLetterP size={28} />} | ||
| /> | ||
| <UiHeader | ||
| profile={ | ||
| <Group gap="xs"> | ||
| {signedIn ? ( | ||
| <UiMenu | ||
| position="bottom-end" | ||
| withArrow | ||
| arrowOffset={14} | ||
| icon={ | ||
| <Avatar src="https://avatars.githubusercontent.com/u/36491?v=4" size={32}> | ||
| <IconUser /> | ||
| </Avatar> | ||
| } | ||
| items={[ | ||
| { label: 'Application', type: 'label' }, | ||
| { | ||
| label: 'Settings', | ||
| type: 'item', | ||
| leftSection: <IconSettings style={{ width: rem(14), height: rem(14) }} />, | ||
| }, | ||
| { | ||
| label: 'Messages', | ||
| type: 'item', | ||
| leftSection: <IconMessageCircle style={{ width: rem(14), height: rem(14) }} />, | ||
| }, | ||
| { | ||
| label: 'Gallery', | ||
| type: 'item', | ||
| leftSection: <IconPhoto style={{ width: rem(14), height: rem(14) }} />, | ||
| }, | ||
| { | ||
| label: 'Search', | ||
| type: 'item', | ||
| leftSection: <IconSearch style={{ width: rem(14), height: rem(14) }} />, | ||
| rightSection: ( | ||
| <Text size="xs" c="dimmed"> | ||
| ⌘K | ||
| </Text> | ||
| ), | ||
| }, | ||
| { | ||
| label: 'Account', | ||
| type: 'label', | ||
| }, | ||
| { | ||
| label: 'Profile', | ||
| type: 'item', | ||
| leftSection: <IconUserCog style={{ width: rem(14), height: rem(14) }} />, | ||
| }, | ||
| { | ||
| label: 'Sign out', | ||
| type: 'item', | ||
| leftSection: <IconDoorExit style={{ width: rem(14), height: rem(14) }} />, | ||
| onClick: () => setSignedIn(false), | ||
| }, | ||
| ]} | ||
| /> | ||
| ) : ( | ||
| <Button size="sm" variant="light" onClick={() => setSignedIn(true)}> | ||
| Sign in | ||
| </Button> | ||
| )} | ||
| </Group> | ||
| } | ||
| /> | ||
| <UiStack hiddenFrom="md"> | ||
| {opened ? ( | ||
| <Button onClick={toggle}>Close menu</Button> | ||
| ) : ( | ||
| <Button variant="light" onClick={toggle}> | ||
| Open menu | ||
| </Button> | ||
| )} | ||
| </UiStack> | ||
|
|
||
| <Routes> | ||
| <Route path="about" element={<div>About</div>} /> | ||
| <Route path="pricing" element={<div>Pricing</div>} /> | ||
| <Route path="learn" element={<div>Learn</div>} /> | ||
| </Routes> | ||
| </UiStack> | ||
| </UiCard> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.