🎨 Add minor UI tweaks in Skeletons and other components (#1507)

This commit is contained in:
Alejandra
2025-02-21 20:29:00 +00:00
committed by GitHub
parent e46b8d9421
commit d18cf4b6be
8 changed files with 50 additions and 51 deletions

View File

@@ -1,29 +1,30 @@
import { Skeleton, Table } from "@chakra-ui/react"
import { Table } from "@chakra-ui/react"
import { SkeletonText } from "../ui/skeleton"
const PendingItems = () => (
<Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header>
<Table.Row>
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
<Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{[...Array(5)].map((_, index) => (
<Table.Row key={index}>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
</Table.Row>
))}

View File

@@ -1,33 +1,34 @@
import { Skeleton, Table } from "@chakra-ui/react"
import { Table } from "@chakra-ui/react"
import { SkeletonText } from "../ui/skeleton"
const PendingUsers = () => (
<Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header>
<Table.Row>
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{[...Array(5)].map((_, index) => (
<Table.Row key={index}>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
<Table.Cell>
<Skeleton h="20px" />
<SkeletonText noOfLines={1} />
</Table.Cell>
</Table.Row>
))}