Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: New default page and peer buttons #1501

Merged
merged 2 commits into from
Mar 18, 2024
Merged

UI: New default page and peer buttons #1501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2450c0
new default page and peer buttons
Amogh-Bharadwaj Mar 18, 2024
7511982
lint
Amogh-Bharadwaj Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 59 additions & 6 deletions ui/app/peers/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,72 @@ export default function Peers() {
>
Peers
</Header>
<Label>
Peers represent a data store. Once you have a couple of peers, you can
start moving data between them through mirrors.
</Label>
</Panel>
<Panel>
{isLoading && (
<div className='h-screen flex items-center justify-center'>
<ProgressCircle variant='determinate_progress_circle' />
</div>
)}
{!isLoading && (
<PeersTable
title='All peers'
peers={peers.map((peer: any) => peer)}
/>
)}
{!isLoading &&
(peers && peers.length == 0 ? (
<div
style={{
display: 'flex',
alignItems: 'center',
columnGap: '1rem',
}}
>
<Button
as={Link}
href={'/peers/create'}
style={{
width: 'fit-content',
boxShadow: '0px 2px 2px rgba(0,0,0,0.1)',
}}
variant='normalSolid'
>
<div
style={{
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
}}
>
<Icon name='add' />
<Label>Add your first peer</Label>
</div>
</Button>

<Button
as={Link}
href={'https://docs.peerdb.io/features/supported-connectors'}
target={'_blank'}
style={{
width: 'fit-content',
boxShadow: '0px 2px 2px rgba(0,0,0,0.1)',
}}
variant='normal'
>
<div
style={{
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
}}
>
<Icon name='info' />
<Label>Learn more about peers</Label>
</div>
</Button>
</div>
) : (
<PeersTable peers={peers.map((peer: any) => peer)} />
))}
</Panel>
</LayoutMain>
);
Expand Down
3 changes: 1 addition & 2 deletions ui/app/peers/peersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function PeerRow({ peer }: { peer: Peer }) {
);
}

function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
function PeersTable({ peers }: { peers: Peer[] }) {
const [searchQuery, setSearchQuery] = useState<string>('');
const [filteredType, setFilteredType] = useState<DBType | undefined>(
undefined
Expand Down Expand Up @@ -65,7 +65,6 @@ function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {

return (
<Table
title={<Label variant='headline'>{title}</Label>}
toolbar={{
left: <></>,
right: (
Expand Down
9 changes: 9 additions & 0 deletions ui/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ const nextConfig = {
compiler: {
styledComponents: true,
},
async redirects() {
return [
{
source: '/',
destination: '/peers',
permanent: false,
},
];
},
reactStrictMode: true,
swcMinify: true,
output: 'standalone',
Expand Down
Loading