feat: only render table if api keys exist

This commit is contained in:
Henry
2025-09-14 20:28:38 +01:00
parent 3e21b23f0a
commit 7073cd5931
2 changed files with 11 additions and 6 deletions

View File

@@ -15,7 +15,7 @@ export default function Dropdown({
<div>
<Menu.Button
disabled={disabled}
className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200"
className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 focus:outline-none dark:hover:bg-dark-200"
>
{children}
</Menu.Button>
@@ -30,7 +30,7 @@ export default function Dropdown({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
<div className="flex flex-col">
{items.map((item) => (
<Menu.Item key={item.label}>

View File

@@ -105,7 +105,7 @@ export default function ApiKeyList() {
)}
>
<div className="flex w-full items-center justify-center px-3">
<div className={twMerge("relative")}>
<div className="relative z-50">
<Dropdown
items={[
{
@@ -126,11 +126,16 @@ export default function ApiKeyList() {
</tr>
);
};
if (!isLoading && (!data?.data || data.data.length === 0)) {
return null;
}
return (
<div className="mt-8 flow-root">
<div className="overflow-x-auto">
<div className="inline-block min-w-full py-2 align-middle">
<div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<div className="overflow-x-auto overflow-y-visible">
<div className="inline-block min-w-full py-2 pb-12 align-middle">
<div className="relative h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="min-w-[600px] divide-y divide-light-600 dark:divide-dark-600">
<thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
<tr>