From 4c2e81a29dd06ed43e0ab8ebd5c137176a9ee1e8 Mon Sep 17 00:00:00 2001 From: Manuel Date: Sat, 29 Jul 2023 16:17:34 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20stepper=20for=20creating=20ne?= =?UTF-8?q?w=20user?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/manage/users/create.tsx | 52 +++++++++++++++++++++++++++++++ src/pages/manage/users/index.tsx | 9 +++++- 2 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 src/pages/manage/users/create.tsx diff --git a/src/pages/manage/users/create.tsx b/src/pages/manage/users/create.tsx new file mode 100644 index 000000000..fda4a858a --- /dev/null +++ b/src/pages/manage/users/create.tsx @@ -0,0 +1,52 @@ +import { Stepper } from '@mantine/core'; +import { IconMailCheck, IconUser } from '@tabler/icons-react'; +import Head from 'next/head'; +import { useState } from 'react'; +import { MainLayout } from '~/components/layout/admin/main-admin.layout'; + +const CreateNewUserPage = () => { + const [active, setActive] = useState(1); + const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current)); + const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current)); + + return ( + + + Create user • Homarr + + + + } + label="First step" + description="Create an account" + > + Step 1 content: Create an account + + } + label="Second step" + description="Verify email" + > + Step 2 content: Verify email + + } + label="Final step" + description="Get full access" + > + Step 3 content: Get full access + + Completed, click back button to get to previous step + + + ); +}; + +export default CreateNewUserPage; diff --git a/src/pages/manage/users/index.tsx b/src/pages/manage/users/index.tsx index 4ee488c76..38cb1976a 100644 --- a/src/pages/manage/users/index.tsx +++ b/src/pages/manage/users/index.tsx @@ -13,6 +13,7 @@ import { } from '@mantine/core'; import { IconPlus, IconTrash } from '@tabler/icons-react'; import Head from 'next/head'; +import Link from 'next/link'; import { useState } from 'react'; import { MainLayout } from '~/components/layout/admin/main-admin.layout'; import { api } from '~/utils/api'; @@ -34,6 +35,7 @@ const ManageUsersPage = () => { Users • Homarr + Manage users @@ -49,7 +51,12 @@ const ManageUsersPage = () => { data={['React', 'Angular', 'Svelte', 'Vue']} variant="filled" /> -