misterkirill/Notra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: setup layouts

Browse Source
This commit is contained in:
Kirill Siukhin 2025-07-03 23:21:45 +05:00
parent c8aaf13965
commit cf87e8829a
14 changed files with 149 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/(editor)/layout.tsx Normal file
View File

@ -0,0 +1,14 @@
import Header from "@/components/Header";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<Header />
{children}
</>
);
}

22
src/app/(editor)/page.tsx Normal file
View File

@ -0,0 +1,22 @@
"use client";
import { Plus } from "lucide-react";
import { ChangeEvent } from "react";
import LineInputGroup from "@/components/LineInputGroup";
import IconButton from "@/components/ui/IconButton";
export default function Home() {
const saveChanges = (e: ChangeEvent) => {
};
return (
<div className="flex flex-col items-center">
<div className="flex flex-col items-center px-4 max-w-2xl w-full gap-4">
<input className="font-bold text-xl w-full text-center focus:outline-none" onChange={saveChanges} defaultValue="Song" />
<LineInputGroup size={4} onChange={saveChanges} />
<IconButton icon={<Plus size={24} />} />
</div>
</div>
);
}

15
src/app/(noneditor)/about/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Rhyme – About",
description: "Information about the Rhyme and its creators",
};
export default function About() {
return (
<>
<h1 className="font-bold text-2xl mb-4">About Page</h1>
<span>TODO</span>
</>
);
}

16
src/app/(noneditor)/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import Header from "@/components/Header";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<Header />
<div className="m-4">
{children}
</div>
</>
);
}

15
src/app/(noneditor)/login/page.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Rhyme – Log In",
description: "Log into Rhyme account to save, show and load notes",
};
export default function About() {
return (
<>
<h1 className="font-bold text-2xl mb-4">Login Page</h1>
<span>TODO</span>
</>
);
}

4
src/app/layout.tsx
View File

@ -1,6 +1,5 @@
import type { Metadata } from "next";
import { Metadata } from "next";
import { Noto_Sans_Mono } from "next/font/google";
import Header from "@/components/Header";
import "./globals.css";
const notoSansMono = Noto_Sans_Mono({
@ -21,7 +20,6 @@ export default function RootLayout({
return (
<html lang="en">
<body className={`${notoSansMono.variable} font-mono antialiased`}>
<Header />
{children}
</body>
</html>

9
src/app/page.tsx
View File

@ -1,9 +0,0 @@
import Lyrics from "@/components/Lyrics";
export default function Home() {
return (
<div className="flex flex-col items-center">
<Lyrics />
</div>
);
}

29
src/components/Header.tsx
View File

@ -1,16 +1,29 @@
import Link from "next/link";
import { Plus, UserRound } from "lucide-react";
import HeaderButton from "./HeaderButton";
import { ArrowRightFromLine, CircleQuestionMark, List, Plus, UserRound } from "lucide-react";
import HeaderButton from "./ui/HeaderButton";
export default function Header() {
export default function Header({ showToolbar = true }: { showToolbar?: boolean }) {
return (
<header className="flex items-center gap-6 m-4">
<Link href="/" className="font-bold px-2 py-1 bg-orange-600 hover:bg-orange-700 rounded">
RHYME
<Link href="/">
<HeaderButton title="rhyme" className="bg-sky-600 hover:bg-sky-500" />
</Link>
<HeaderButton title="new" icon={<Plus size={20} />} />
<div className="ml-auto">
<HeaderButton title="log in" icon={<UserRound size={20} />} />
{showToolbar && (
<div className="flex gap-2">
<HeaderButton title="new" icon={<Plus size={20} />} />
<HeaderButton title="list" icon={<List size={20} />} />
<HeaderButton title="export" icon={<ArrowRightFromLine size={20} />} />
</div>
)}
<div className="flex gap-2 ml-auto">
<Link href="/about">
<HeaderButton title="about" icon={<CircleQuestionMark size={20} />} />
</Link>
<Link href="/login">
<HeaderButton title="login" icon={<UserRound size={20} />} />
</Link>
</div>
</header>
);

10
src/components/HeaderButton.tsx
View File

@ -1,10 +0,0 @@
import { ReactNode } from "react";
export default function HeaderButton({ title, icon }: { title: string, icon?: ReactNode }) {
return (
<button className="flex rounded bg-neutral-800 hover:bg-neutral-700 px-2 py-1 gap-2 items-center cursor-pointer">
{title}
{icon}
</button>
);
}

25
src/components/LineInputGroup.tsx Normal file
View File

@ -0,0 +1,25 @@
import { LockOpen, X } from "lucide-react";
import LineInput from "./ui/LineInput";
import IconButton from "./ui/IconButton";
import { ChangeEvent } from "react";
export default function LineInputGroup({
size = 4,
onChange,
}: {
size: number;
onChange: (e: ChangeEvent) => void;
}) {
return (
<div className="flex gap-2 w-full">
<div className="border-2 border-neutral-800 rounded-lg p-3 w-full">
<input type="text" placeholder="tag line" className="w-full focus:outline-none" />
{[...Array(size)].map((_, i) => <LineInput onChange={onChange} key={i} />)}
</div>
<div className="flex flex-col gap-3">
<IconButton icon={<X size={18} />} />
<IconButton icon={<LockOpen size={18} />} />
</div>
</div>
);
}

17
src/components/Lyrics.tsx
View File

@ -1,17 +0,0 @@
"use client";
import { ChangeEvent } from "react";
import Input from "./Input";
export default function Lyrics() {
const onChange = (e: ChangeEvent<HTMLInputElement>) => {
// TODO
}
return (
<div className="flex flex-col items-center px-4 max-w-2xl w-full">
<h1 className="my-4 font-bold text-xl">Song #1</h1>
{[...Array(4)].map((_, i) => <Input key={i} onChange={onChange} />)}
</div>
);
}

10
src/components/ui/HeaderButton.tsx Normal file
View File

@ -0,0 +1,10 @@
import { ReactNode } from "react";
export default function HeaderButton({ title, icon, className }: { title: string, icon?: ReactNode, className?: string }) {
return (
<button className={`flex rounded bg-neutral-800 hover:bg-neutral-700 px-2 py-1 gap-2 items-center cursor-pointer ${className}`}>
{title}
{icon}
</button>
);
}

9
src/components/ui/IconButton.tsx Normal file
View File

@ -0,0 +1,9 @@
import { ReactNode } from "react";
export default function IconButton({ icon }: { icon: ReactNode }) {
return (
<button className="rounded-full p-2 border cursor-pointer border-neutral-500 hover:border-neutral-400 text-neutral-500 hover:text-neutral-400">
{icon}
</button>
);
}

2
src/components/Input.tsx → src/components/ui/LineInput.tsx
View File

@ -1,6 +1,6 @@
import { InputHTMLAttributes } from "react";
export default function Input(props: InputHTMLAttributes<HTMLInputElement>) {
export default function LineInput(props: InputHTMLAttributes<HTMLInputElement>) {
return (
<input type="text" className="border-b-2 border-b-neutral-600 focus:border-b-neutral-500 bg-neutral-800/30 p-2 my-2 rounded-t-md text-lg focus:outline-none font-mono w-full" {...props} />
);