From 6e7f6e93a0c72057b97bbb2c80af846a7876fe2d Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Wed, 15 Mar 2023 11:13:11 +0000 Subject: [PATCH] Start working on the page layout --- app/layout.tsx | 29 ++++++++++++++++++++++++++++ app/page.tsx | 28 +++++++++++++++++++++++++-- components/Chapter.tsx | 20 +++++++++++++++++++ components/Layout.module.css | 37 ++++++++++++++++++++++++++++++++++++ components/Layout.tsx | 28 +++++++++++++++++++++++++++ components/Topic.tsx | 19 ++++++++++++++++++ 6 files changed, 159 insertions(+), 2 deletions(-) create mode 100644 app/layout.tsx create mode 100644 components/Chapter.tsx create mode 100644 components/Layout.module.css create mode 100644 components/Layout.tsx create mode 100644 components/Topic.tsx diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..3c2edd7 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,29 @@ +import "@steffo/bluelib/dist/base.root.css" +import "@steffo/bluelib/dist/classic.root.css" +import "@steffo/bluelib/dist/glass.root.css" +import "@steffo/bluelib/dist/fun.root.css" +import "@steffo/bluelib/dist/colors-royalblue.root.css" +import "@steffo/bluelib/dist/fonts-fira-ghpages.root.css" +import React from "react" + + +export const metadata = { + title: 'Unisteffo', + description: 'Gli appunti liberi di Steffo', +} + + +export interface RootLayoutProps { + children: React.ReactNode, +} + + +export default function RootLayout(props: RootLayoutProps) { + return ( + + + {props.children} + + + ) +} diff --git a/app/page.tsx b/app/page.tsx index 2af0a4f..00b320e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,3 +1,27 @@ +import { Chapter } from "../components/Chapter"; +import { Topic } from "../components/Topic"; +import { Layout } from "../components/Layout"; + export default function Page() { - return

Hello, Next.js!

; -} \ No newline at end of file + return ( + + +

+ Il mio sito di appunti. +

+ + + } + sidebar={ + +
+ sus +
+ + } + /> + ) +} diff --git a/components/Chapter.tsx b/components/Chapter.tsx new file mode 100644 index 0000000..e408f41 --- /dev/null +++ b/components/Chapter.tsx @@ -0,0 +1,20 @@ +import React from "react" + + +export interface ChapterProps { + children: React.ReactNode, + heading: React.ReactNode, + columns: number, +} + + +export function Chapter(props: ChapterProps) { + return ( +
+

+ {props.heading} +

+ {props.children} +
+ ) +} diff --git a/components/Layout.module.css b/components/Layout.module.css new file mode 100644 index 0000000..5514cec --- /dev/null +++ b/components/Layout.module.css @@ -0,0 +1,37 @@ +.layout { + padding: 8px; + height: calc(100vh - 16px); + overflow: hidden; + + display: grid; + grid-template-areas: + "heading empty" + "main side" + ; + grid-template-rows: auto 1fr; + grid-template-columns: 1fr 320px; + align-content: stretch; + column-gap: 8px; +} + +.layout > .heading { + grid-area: heading; +} + +.layout > .main { + grid-area: main; + overflow-y: scroll; +} + +.layout > .sidebar { + grid-area: side; + overflow-y: scroll; +} + +.layout :where(:global(.chapter-0), :global(.chapter-1), :global(.chapter-2), :global(.chapter-3), :global(.chapter-4), :global(.chapter-5), :global(.chapter-6), :global(.chapter-7), :global(.chapter-8), :global(.chapter-9)):first-child { + margin-top: 0; +} + +.layout :where(:global(.chapter-0), :global(.chapter-1), :global(.chapter-2), :global(.chapter-3), :global(.chapter-4), :global(.chapter-5), :global(.chapter-6), :global(.chapter-7), :global(.chapter-8), :global(.chapter-9)):last-child { + margin-bottom: 0; +} diff --git a/components/Layout.tsx b/components/Layout.tsx new file mode 100644 index 0000000..b1997a9 --- /dev/null +++ b/components/Layout.tsx @@ -0,0 +1,28 @@ +import style from "./Layout.module.css" +import Link from "next/link" + + +export interface LayoutProps { + heading: React.ReactNode, + main: React.ReactNode, + sidebar: React.ReactNode, +} + + +export function Layout(props: LayoutProps) { + return ( +
+ +

+ {props.heading} +

+ +
+ {props.main} +
+ +
+ ) +} diff --git a/components/Topic.tsx b/components/Topic.tsx new file mode 100644 index 0000000..45d53db --- /dev/null +++ b/components/Topic.tsx @@ -0,0 +1,19 @@ +import React from "react" + + +export interface TopicProps { + children: React.ReactNode, + heading: React.ReactNode, +} + + +export function Topic(props: TopicProps) { + return ( +
+

+ {props.heading} +

+ {props.children} +
+ ) +}