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

action button styling in settings and toast on copy

Browse source
This commit is contained in:
msukkari 2025-02-12 21:19:15 -08:00
parent 8ad6ba7ab0
commit 258585e981
4 changed files with 68 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/web/src/app/[domain]/settings/components/inviteTable.tsx
View file

@ -2,6 +2,7 @@
import { useMemo } from "react";
import { DataTable } from "@/components/ui/data-table";
import { InviteColumnInfo, inviteTableColumns } from "./inviteTableColumns"
import { useToast } from "@/components/hooks/use-toast";
export interface InviteInfo {
id: string;
@ -14,6 +15,14 @@ interface InviteTableProps {
}
export const InviteTable = ({ initialInvites }: InviteTableProps) => {
const { toast } = useToast();
const displayToast = (message: string) => {
toast({
description: message,
});
}
const inviteRows: InviteColumnInfo[] = useMemo(() => {
return initialInvites.map(invite => {
return {
@ -28,7 +37,7 @@ export const InviteTable = ({ initialInvites }: InviteTableProps) => {
<div className="space-y-2">
<h4 className="text-lg font-normal">Invites</h4>
<DataTable
columns={inviteTableColumns()}
columns={inviteTableColumns(displayToast)}
data={inviteRows}
searchKey="email"
searchPlaceholder="Search invites..."

26
packages/web/src/app/[domain]/settings/components/inviteTableColumns.tsx
View file

@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
import { ColumnDef } from "@tanstack/react-table"
import { resolveServerPath } from "@/app/api/(client)/client";
import { createPathWithQueryParams } from "@/lib/utils";
import { useToast } from "@/components/hooks/use-toast";
export type InviteColumnInfo = {
id: string;
@ -11,7 +12,7 @@ export type InviteColumnInfo = {
createdAt: Date;
}
export const inviteTableColumns = (): ColumnDef<InviteColumnInfo>[] => {
export const inviteTableColumns = (displayToast: (message: string) => void): ColumnDef<InviteColumnInfo>[] => {
return [
{
accessorKey: "email",
@ -28,19 +29,36 @@ export const inviteTableColumns = (): ColumnDef<InviteColumnInfo>[] => {
}
},
{
accessorKey: "copy",
id: "copy",
cell: ({ row }) => {
const invite = row.original;
return (
<Button
variant="link"
variant="ghost"
size="icon"
onClick={() => {
const basePath = `${window.location.origin}${resolveServerPath('/')}`;
const url = createPathWithQueryParams(`${basePath}redeem?invite_id=${invite.id}`);
navigator.clipboard.writeText(url);
displayToast("✅ Copied invite link");
}}
>
Copy
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="hover:stroke-gray-600 transition-colors"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
</svg>
</Button>
)
}

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

@ -10,12 +10,14 @@ import { createInvite } from "@/actions"
import { isServiceError } from "@/lib/utils";
import { useDomain } from "@/hooks/useDomain";
import { ErrorCode } from "@/lib/errorCodes";
import { useRouter } from "next/navigation";
const formSchema = z.object({
email: z.string().min(2).max(40),
});
export const MemberInviteForm = ({ userId }: { userId: string }) => {
const router = useRouter();
const { toast } = useToast();
const domain = useDomain();
@ -37,6 +39,8 @@ export const MemberInviteForm = ({ userId }: { userId: string }) => {
toast({
description: `✅ Invite created successfully!`
});
router.refresh();
}
}

32
packages/web/src/app/[domain]/settings/components/memberTableColumns.tsx
View file

@ -1,5 +1,6 @@
'use client'
import { Button } from "@/components/ui/button"
import { ColumnDef } from "@tanstack/react-table"
export type MemberColumnInfo = {
@ -22,6 +23,37 @@ export const memberTableColumns = (): ColumnDef<MemberColumnInfo>[] => {
const member = row.original;
return <div>{member.role}</div>;
}
},
{
id: "remove",
cell: () => {
return (
<Button
variant="ghost"
size="icon"
onClick={() => {
// TODO: Implement remove member action
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-red-400 hover:text-red-600 transition-colors"
>
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
</svg>
</Button>
);
}
}
]
}