markus/next-ory
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/next-ory.git synced 2025-04-19 00:51:18 +00:00
Code Releases Packages Activity

NORY-15: improve root layout and styling

Browse source
This commit is contained in:
Markus Thielker 2024-12-06 16:34:35 +01:00
parent 59ed13b2cc
commit 71d0e81ebd
No known key found for this signature in database
5 changed files with 16 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dashboard/src/app/globals.css
View file

@ -73,6 +73,6 @@
} }
body { body {
@apply bg-background text-foreground; @apply bg-sidebar text-foreground;
} }
} }

12
dashboard/src/app/layout.tsx
View file

@ -35,7 +35,7 @@ export const metadata = {
}; };
export const viewport: Viewport = { export const viewport: Viewport = {
themeColor: '#0B0908', themeColor: '#18181b',
width: 'device-width', width: 'device-width',
}; };
@ -56,10 +56,10 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
enableSystem enableSystem
disableTransitionOnChange disableTransitionOnChange
> >
<SidebarProvider> <SidebarProvider className="max-h-screen min-h-screen">
<AppSidebar className="mx-1"/> <AppSidebar className="mx-1"/>
<SidebarInset className="p-2"> <SidebarInset className="overflow-hidden p-6 space-y-6">
<header className="flex h-16 shrink-0 items-center gap-2 px-4"> <header className="flex h-4 items-center gap-2">
<SidebarTrigger className="-ml-1 p-1"/> <SidebarTrigger className="-ml-1 p-1"/>
<Separator orientation="vertical" className="mr-2 h-4"/> <Separator orientation="vertical" className="mr-2 h-4"/>
{ {
@ -75,12 +75,12 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
</header> </header>
<div className="flex flex-col p-4 pt-0"> <div className="flex-1 overflow-scroll">
{children} {children}
<Toaster/>
</div> </div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>
<Toaster/>
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

4
dashboard/src/app/user/data-table.tsx
View file

@ -80,7 +80,5 @@ export function IdentityDataTable({ data }: IdentityDataTableProps) {
}, },
]; ];
return ( return <DataTable columns={columns} data={data}/>;
<DataTable columns={columns} data={data}/>
);
} }

16
dashboard/src/app/user/page.tsx
View file

@ -1,5 +1,4 @@
import React, { Suspense } from 'react'; import React from 'react';
import { DataTableFallback } from '@/components/ui/data-table-fallback';
import { IdentityDataTable } from '@/app/user/data-table'; import { IdentityDataTable } from '@/app/user/data-table';
import { getIdentityApi } from '@/ory/sdk/server'; import { getIdentityApi } from '@/ory/sdk/server';
import { SearchInput } from '@/components/search-input'; import { SearchInput } from '@/components/search-input';
@ -23,17 +22,16 @@ export default async function UserPage(
}).then(response => response.data); }).then(response => response.data);
return ( return (
<div className="flex flex-col space-y-4"> <div className="space-y-4">
<div> <div>
<p className="text-3xl font-bold leading-tight tracking-tight">Users</p> <p className="text-3xl font-bold leading-tight tracking-tight">Users</p>
<p className="text-lg font-light">See and manage all identities registered with your Ory Kratos <p className="text-lg font-light">
instance</p> See and manage all identities registered with your Ory Kratos instance
</p>
</div> </div>
<div className="flex flex-col space-y-2"> <div className="space-y-2">
<SearchInput queryParamKey="query" placeholder="Search"/> <SearchInput queryParamKey="query" placeholder="Search"/>
<Suspense fallback={<DataTableFallback columnCount={5} rowCount={20}/>}> <IdentityDataTable data={data}/>
<IdentityDataTable data={data}/>
</Suspense>
</div> </div>
</div> </div>
); );

1
dashboard/src/components/ui/data-table.tsx
View file

@ -2,6 +2,7 @@
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import React from 'react';
interface DataTableProps<TData, TValue> { interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]; columns: ColumnDef<TData, TValue>[];