From 3f7111bd5c6e20bc43b9ca12a70c174e91640dfb Mon Sep 17 00:00:00 2001
From: Lea <me@janderedev.xyz>
Date: Thu, 18 Jan 2024 10:27:38 +0100
Subject: [PATCH] display alias pending status as badge

---
 src/lib/components/ui/user/OwnAliasesCard.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ui/user/OwnAliasesCard.tsx b/src/lib/components/ui/user/OwnAliasesCard.tsx
index 6a12dab..de527b5 100644
--- a/src/lib/components/ui/user/OwnAliasesCard.tsx
+++ b/src/lib/components/ui/user/OwnAliasesCard.tsx
@@ -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>