add navigation

add pages structure
temp disable telegram provider
This commit is contained in:
vchikalkin 2024-12-16 18:53:55 +03:00
parent 847107866e
commit 8169685d6a
15 changed files with 91 additions and 16 deletions

View File

@ -0,0 +1,3 @@
export default function DashboardPage() {
return 'Dashboard';
}

View File

@ -0,0 +1,11 @@
import { BottomNav } from '@/components/navigation';
import { type PropsWithChildren } from 'react';
export default async function Layout({ children }: Readonly<PropsWithChildren>) {
return (
<div className="min-h-screen">
<main>{children}</main>
<BottomNav />
</div>
);
}

View File

@ -0,0 +1,3 @@
export default function MastersPage() {
return 'Masters';
}

View File

@ -0,0 +1,5 @@
import { redirect } from 'next/navigation';
export default async function Profile() {
redirect('/dashboard');
}

View File

@ -0,0 +1,8 @@
'use client';
import { initData, useSignal } from '@telegram-apps/sdk-react';
export default function ProfilePage() {
const initDataState = useSignal(initData.state);
return JSON.stringify(initDataState, null, 2);
}

View File

@ -0,0 +1,3 @@
export default function AddRecordsPage() {
return 'Add Records';
}

View File

@ -0,0 +1,3 @@
export default function RecordsPage() {
return 'Records';
}

View File

@ -1,7 +1,8 @@
import { Root } from '@/components/telegram';
// import { Root as TelegramRoot } from '@/components/telegram';
import { I18nProvider } from '@/utils/i18n/provider';
import { type Metadata } from 'next';
import { getLocale } from 'next-intl/server';
import '@repo/ui/globals.css';
import { type PropsWithChildren } from 'react';
export const metadata: Metadata = {
@ -16,7 +17,9 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
<html lang={locale}>
<body>
<I18nProvider>
<Root>{children}</Root>
{/* <TelegramRoot> */}
{children}
{/* </TelegramRoot> */}
</I18nProvider>
</body>
</html>

View File

@ -1,14 +0,0 @@
'use client';
import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react';
export default function InitDataPage() {
const initDataState = useSignal(initData.state);
const isDark = isMiniAppDark();
return (
<code style={{ color: isDark ? 'white' : 'black' }}>
{JSON.stringify(initDataState, null, 2)}
</code>
);
}

View File

@ -0,0 +1 @@
export * from './navbar';

View File

@ -0,0 +1,26 @@
'use client';
import { Button } from '@repo/ui/components/ui/button';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
type NavButtonProps = {
readonly href: string;
readonly icon: React.ReactNode;
readonly label: string;
};
export function NavButton({ href, icon, label }: NavButtonProps) {
const pathname = usePathname();
return (
<Button
asChild
className="flex flex-col items-center p-6"
variant={pathname.endsWith(href) ? 'default' : 'ghost'}
>
<Link href={href}>
<span>{icon}</span>
<span className="mt-1 text-xs">{label}</span>
</Link>
</Button>
);
}

View File

@ -0,0 +1,16 @@
import { NavButton } from './nav-button';
import { BookOpen, Newspaper, PlusCircle, User, Users } from 'lucide-react';
export function BottomNav() {
return (
<nav className="fixed inset-x-0 bottom-0 border-t border-border bg-background">
<div className="grid grid-cols-5">
<NavButton href="/dashboard" icon={<Newspaper />} label="Главное" />
<NavButton href="/records" icon={<BookOpen />} label="Записи" />
<NavButton href="/records/add" icon={<PlusCircle />} label="Новая запись" />
<NavButton href="/masters" icon={<Users />} label="Мастера" />
<NavButton href="/profile" icon={<User />} label="Профиль" />
</div>
</nav>
);
}

View File

@ -7,5 +7,8 @@ export default [
...tailwindConfig,
{
ignores: ['**/graphql/types.ts', '**/schema.graphql'],
rules:{
'react/forbid-component-props':0
}
},
];

View File

@ -19,6 +19,7 @@
"@repo/ui": "workspace:*",
"@telegram-apps/sdk-react": "^2.0.19",
"graphql": "catalog:",
"lucide-react": "catalog:",
"next": "catalog:",
"next-intl": "^3.26.0",
"react": "catalog:",

3
pnpm-lock.yaml generated
View File

@ -149,6 +149,9 @@ importers:
graphql:
specifier: 'catalog:'
version: 16.9.0
lucide-react:
specifier: 'catalog:'
version: 0.462.0(react@19.0.0)
next:
specifier: 'catalog:'
version: 15.1.0(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)