Luis/nextjs-python-web-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init: layout

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-05 13:51:33 +02:00
committed by hsjobeki
parent 4ec7e13e96
commit a0a137191d
12 changed files with 2460 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
pkgs/ui/src/app/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { DashboardCard } from "../../components/card";
import { Grid } from "@mui/material";
import { Button } from "@mui/material";
export default function Dashboard() {
return (
<Grid container>
<Grid item xs={12}>
<DashboardCard />
<Button variant="contained" color="primary">
Click me!
</Button>
Hallo Mike !
</Grid>
<Grid item xs={6}>
<DashboardCard />
Server Stats
</Grid>
<Grid item xs={6}>
Network Stats
<DashboardCard />
</Grid>
</Grid>
);
}

21
pkgs/ui/src/app/layout.tsx
View File

@@ -1,8 +1,11 @@
import "./globals.css";
import type { Metadata } from "next";
import localFont from "next/font/local";
import * as React from "react";
import { StyledEngineProvider } from "@mui/material/styles";
import cx from "classnames";
// import { tw } from "../utils/tailwind";
// const fontPath = ;
const roboto = localFont({
src: [
{
@@ -28,7 +31,6 @@ const roboto = localFont({
],
});
// const inter =
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
@@ -41,7 +43,20 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={roboto.className}>{children}</body>
<StyledEngineProvider injectFirst>
<body
className={cx(
"h-screen",
"min-h-screen",
"w-screen",
"bg-white",
// custom animation defined in tailwind.config
roboto.className
)}
>
{children}
</body>
</StyledEngineProvider>
</html>
);
}

2
pkgs/ui/src/app/page.tsx
View File

@@ -2,7 +2,7 @@ import Image from "next/image";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<main className="min-h-screen">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;

5
pkgs/ui/src/components/card/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Card } from "@mui/material";
const DashboardCard = Card;
export { DashboardCard };

10
pkgs/ui/src/utils/tailwind.ts Normal file
View File

@@ -0,0 +1,10 @@
/**
* use this template literal to write tailwind classes
* example: tw`transition-colors duration-300 ease-in-out active:duration-100`
*
* to use this, you need to add the following to your tailwind plugin configuration (Intellij settings)
* "experimental": {
* "classRegex": ["tw`(.*)`"]
* }
*/
export const tw = String.raw;