nope/pages/index.tsx
2020-10-29 19:20:42 +01:00

100 lines
3.2 KiB
TypeScript

import { faHashtag } from '@fortawesome/free-solid-svg-icons';
import { GetStaticProps } from 'next';
import Head from 'next/head';
import { join } from 'path';
import { Button, Container, Jumbotron, Table } from 'react-bootstrap';
import { FOLDER_SPLIT, listFiles } from '../lib/helpers/fileMethods';
import { replaceAll } from '../lib/helpers/stringMethods';
import Toolbar from '../resources/ui/layout/toolbar';
interface IFile {
name: string,
path: string,
}
export const getStaticProps: GetStaticProps = async () => {
const data: IFile[] = [];
const files: IFile[] = (await listFiles(join(process.cwd(), 'pages'), '.tsx')).map(file => {
console.log(file)
let path = file.split(FOLDER_SPLIT + 'pages' + FOLDER_SPLIT)[1];
path = path.slice(0, path.length - 4);
path = '/' + replaceAll(path, FOLDER_SPLIT, '/');
let name = path.split('/')[path.split('/').length - 1];
return {
name,
path
};
}).filter(
// Filter the Files, based on their Name.
// Elements starting with _ wont be used.
file =>
!file.name.startsWith('_') &&
file.name !== 'index'
);
return {
props: {
data: files
}
}
}
export default function Home(props: { data: IFile[] }) {
let idx = 0;
return (
<>
<Head>
<title>Nope Backend - Home</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Container>
<Toolbar<undefined> toolbar={{
items: [
{
type: 'link',
ref: '/docs',
label: 'docs',
icon: faHashtag
}
]
}} generateData={() => undefined} brand={{
label: 'nopeBackend',
ref: '/',
type: 'link',
}}>
</Toolbar>
<Jumbotron>
<h1>Hello</h1>
<p>
Congratulations, your are running the nopeBackend! The Following Items have been found:
</p>
</Jumbotron>
<Table striped bordered hover>
<thead>
<tr>
<th>Name</th>
<th>Path</th>
<th></th>
</tr>
</thead>
<tbody>
{props.data.map(file => {
return (
<tr key={idx++}>
<td>{file.name}</td>
<td><code>{file.path}</code></td>
<td><Button variant="light" href={file.path} style={{ width: '100%' }}>Open</Button></td>
</tr>
)
})}
</tbody>
</Table>
</Container>
</>
)
}