display alias pending status as badge

This commit is contained in:
Lea 2024-01-18 10:27:38 +01:00
parent f67413f3dd
commit 3f7111bd5c
Signed by: Lea
GPG key ID: 1BAFFE8347019C42

View file

@ -4,7 +4,7 @@ import { aliasAvailable, createAliasSelf, deleteAlias, fetchOwnAliases } from "@
import { ALIAS_DOMAINS } from "@/lib/constants";
import { AliasEntry } from "@/lib/db";
import { aliasesNeedApproval } from "@/lib/util";
import { Box, Button, Callout, Card, Code, Dialog, DropdownMenu, Flex, Heading, ScrollArea, Table, Text, TextField } from "@radix-ui/themes";
import { Badge, Box, Button, Callout, Card, Code, Dialog, DropdownMenu, Flex, Heading, ScrollArea, Table, Text, TextField } from "@radix-ui/themes";
import { ChevronDownIcon, InfoIcon, UsersRoundIcon } from "lucide-react";
import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
@ -118,7 +118,6 @@ export default function OwnAliasesCard() {
<Table.Header>
<Table.Row>
<Table.ColumnHeaderCell justify='start'>Alias</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell justify='end'>Active</Table.ColumnHeaderCell>
<Table.ColumnHeaderCell justify='end'>Manage</Table.ColumnHeaderCell>
</Table.Row>
</Table.Header>
@ -126,8 +125,10 @@ export default function OwnAliasesCard() {
<Table.Body>
{
aliases.map((alias => <Table.Row key={alias.id}>
<Table.Cell justify='start'>{alias.alias}</Table.Cell>
<Table.Cell justify='end'>{alias.pending ? "Pending" : "Active"}</Table.Cell>
<Table.Cell justify='start'>
{alias.alias}
{alias.pending && <Badge variant="soft" ml="2" color="orange">Pending</Badge>}
</Table.Cell>
<Table.Cell justify='end'>
<Dialog.Root>
<Dialog.Trigger>