Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Standalone component for empty state of dashboard

Browse source
This commit is contained in:
navaneeth 2021-05-27 13:41:28 +05:30
parent fde9df08fd
commit 7330dad6f9
2 changed files with 34 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/HomePage/BlankPage.jsx Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
export const BlankPage = function BlankPage({
createApp
}) {
return (<div>
<div class="page-wrapper">
<div class="container-xl">
</div>
<div class="page-body">
<div class="container-xl d-flex flex-column justify-content-center">
<div class="empty">
<div class="empty-img"><img src="/assets/images/blank.svg" height="128" alt="" />
</div>
<p class="empty-title">You haven't created any apps yet.</p>
<div class="empty-action">
<a onClick={createApp} class="btn btn-primary text-light">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Create your first app
</a>
<a href="https://docs.tooljet.io" target="_blank" class="btn btn-primary text-light mx-2">
Read documentation
</a>
</div>
</div>
</div>
</div>
</div>
</div>)
}

26
frontend/src/HomePage/HomePage.jsx
View file

@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import { Pagination, Header } from '@/_components';
import { Folders } from './Folders';
import { AppMenu } from './AppMenu';
import { BlankPage } from './BlankPage';
class HomePage extends React.Component {
constructor(props) {
@ -84,28 +85,9 @@ class HomePage extends React.Component {
/>
{!isLoading && meta.total_count === 0 &&
<div class="page-wrapper">
<div class="container-xl">
</div>
<div class="page-body">
<div class="container-xl d-flex flex-column justify-content-center">
<div class="empty">
<div class="empty-img"><img src="/assets/images/blank.svg" height="128" alt=""/>
</div>
<p class="empty-title">You haven't created any apps yet.</p>
<div class="empty-action">
<a onClick={this.createApp} class="btn btn-primary text-light">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Create your first app
</a>
<a href="https://docs.tooljet.io" target="_blank" class="btn btn-primary text-light mx-2">
Read documentation
</a>
</div>
</div>
</div>
</div>
</div>
<BlankPage
createApp={this.createApp}
/>
}
{(isLoading || meta.total_count > 0) &&