ti.sil/sourcebot
1
0
Fork 0
mirror of https://github.com/sourcebot-dev/sourcebot.git synced 2025-12-15 13:55:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve styling of members page

Browse source
This commit is contained in:
msukkari 2025-02-10 18:14:13 -08:00
parent 23f3c605ec
commit 04991fd1e8
5 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/web/src/app/settings/components/inviteTable.tsx
View file

@ -25,7 +25,8 @@ export const InviteTable = ({ initialInvites }: InviteTableProps) => {
}, [initialInvites]); }, [initialInvites]);
return ( return (
<div> <div className="space-y-2">
<h4 className="text-lg font-normal">Invites</h4>
<DataTable <DataTable
columns={inviteTableColumns()} columns={inviteTableColumns()}
data={inviteRows} data={inviteRows}

4
packages/web/src/app/settings/components/memberInviteForm.tsx
View file

@ -8,6 +8,7 @@ import { Input } from "@/components/ui/input";
import { useToast } from "@/components/hooks/use-toast"; import { useToast } from "@/components/hooks/use-toast";
import { createInvite } from "../../../actions" import { createInvite } from "../../../actions"
import { isServiceError } from "@/lib/utils"; import { isServiceError } from "@/lib/utils";
import { Separator } from "@/components/ui/separator"
const formSchema = z.object({ const formSchema = z.object({
email: z.string().min(2).max(40), email: z.string().min(2).max(40),
@ -38,7 +39,8 @@ export const MemberInviteForm = ({ orgId, userId }: { orgId: number, userId: str
} }
return ( return (
<div> <div className="space-y-2">
<h4 className="text-lg font-normal">Invite a member</h4>
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(handleCreateInvite)}> <form onSubmit={form.handleSubmit(handleCreateInvite)}>
<FormField <FormField

3
packages/web/src/app/settings/components/memberTable.tsx
View file

@ -23,7 +23,8 @@ export const MemberTable = ({ initialMembers }: MemberTableProps) => {
}, [initialMembers]); }, [initialMembers]);
return ( return (
<div> <div className="space-y-2">
<h4 className="text-lg font-normal">Members</h4>
<DataTable <DataTable
columns={memberTableColumns()} columns={memberTableColumns()}
data={memberRows} data={memberRows}

3
packages/web/src/app/settings/layout.tsx
View file

@ -6,8 +6,7 @@ import { SidebarNav } from "./components/sidebar-nav"
import { NavigationMenu } from "../components/navigationMenu" import { NavigationMenu } from "../components/navigationMenu"
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Forms", title: "Settings",
description: "Advanced form example using react-hook-form and Zod.",
} }
const sidebarNavItems = [ const sidebarNavItems = [

12
packages/web/src/app/settings/page.tsx
View file

@ -5,6 +5,7 @@ import { prisma } from "@/prisma";
import { MemberTable } from "./components/memberTable"; import { MemberTable } from "./components/memberTable";
import { MemberInviteForm } from "./components/memberInviteForm"; import { MemberInviteForm } from "./components/memberInviteForm";
import { InviteTable } from "./components/inviteTable"; import { InviteTable } from "./components/inviteTable";
import { Separator } from "@/components/ui/separator"
export default async function MembersPage() { export default async function MembersPage() {
const fetchData = async () => { const fetchData = async () => {
@ -66,10 +67,19 @@ export default async function MembersPage() {
return ( return (
<div className="space-y-6">
<div> <div>
<h3 className="text-lg font-medium">Members</h3>
<p className="text-sm text-muted-foreground">
Invite and manage members of your organization.
</p>
</div>
<Separator />
<div className="space-y-6">
<MemberTable initialMembers={memberInfo} />
<MemberInviteForm orgId={user.activeOrgId!} userId={user.id} /> <MemberInviteForm orgId={user.activeOrgId!} userId={user.id} />
<InviteTable initialInvites={inviteInfo} /> <InviteTable initialInvites={inviteInfo} />
<MemberTable initialMembers={memberInfo} /> </div>
</div> </div>
) )
} }