Skip to content

Commit dee5875

Browse files
iRingiliRingil
committed
style: change style
1 parent 51b72e4 commit dee5875

File tree

2 files changed

+146
-64
lines changed

2 files changed

+146
-64
lines changed

‎frontend/src/components/Pending/PendingItems.tsx‎

Lines changed: 72 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,77 @@
1+
/**
2+
* @file Defines a PendingItems component for displaying a table placeholder.
3+
* @description Renders a table with skeleton text placeholders for loading states.
4+
* @module PendingItems
5+
*/
6+
7+
"use client"
8+
19
import { Table } from "@chakra-ui/react"
10+
import type * as React from "react"
11+
import { useMemo } from "react"
12+
import type { FC } from "react"
213
import { SkeletonText } from "../ui/skeleton"
314

4-
const PendingItems = () => (
5-
<Table.Root size={{ base: "sm", md: "md" }}>
6-
<Table.Header>
7-
<Table.Row>
8-
<Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
9-
<Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
10-
<Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
11-
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
12-
</Table.Row>
13-
</Table.Header>
14-
<Table.Body>
15-
{[...Array(5)].map((_, index) => (
16-
<Table.Row key={index}>
17-
<Table.Cell>
18-
<SkeletonText noOfLines={1} />
19-
</Table.Cell>
20-
<Table.Cell>
21-
<SkeletonText noOfLines={1} />
22-
</Table.Cell>
23-
<Table.Cell>
24-
<SkeletonText noOfLines={1} />
25-
</Table.Cell>
26-
<Table.Cell>
27-
<SkeletonText noOfLines={1} />
28-
</Table.Cell>
15+
// region Type Aliases
16+
17+
/**
18+
* Props for the PendingItems component.
19+
* @interface PendingItemsProps
20+
*/
21+
interface PendingItemsProps extends Record<string, never> {}
22+
23+
/**
24+
* Type alias for the PendingItems component.
25+
* @type {PendingItemsComponent}
26+
*/
27+
type PendingItemsComponent = FC<PendingItemsProps>
28+
29+
// endregion
30+
31+
// region Main Code
32+
33+
/**
34+
* PendingItems component for rendering a table with skeleton placeholders.
35+
* @returns {React.ReactElement} The rendered PendingItems component.
36+
*/
37+
export const PendingItems: PendingItemsComponent = function PendingItems(): React.ReactElement {
38+
const skeletonCell: React.ReactElement = <SkeletonText noOfLines={1} />
39+
const rows: React.ReactElement[] = useMemo(
40+
(): React.ReactElement[] =>
41+
Array(5)
42+
.fill(0)
43+
.map(
44+
(_: any, index: number): React.ReactElement => (
45+
<Table.Row key={index}>
46+
<Table.Cell>{skeletonCell}</Table.Cell>
47+
<Table.Cell>{skeletonCell}</Table.Cell>
48+
<Table.Cell>{skeletonCell}</Table.Cell>
49+
<Table.Cell>{skeletonCell}</Table.Cell>
50+
</Table.Row>
51+
),
52+
),
53+
[],
54+
)
55+
56+
return (
57+
<Table.Root size={{ base: "sm", md: "md" }}>
58+
<Table.Header>
59+
<Table.Row>
60+
<Table.ColumnHeader w="sm">ID</Table.ColumnHeader>
61+
<Table.ColumnHeader w="sm">Title</Table.ColumnHeader>
62+
<Table.ColumnHeader w="sm">Description</Table.ColumnHeader>
63+
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
2964
</Table.Row>
30-
))}
31-
</Table.Body>
32-
</Table.Root>
33-
)
65+
</Table.Header>
66+
<Table.Body>{rows}</Table.Body>
67+
</Table.Root>
68+
)
69+
}
70+
71+
// endregion
72+
73+
// region Optional Declarations
74+
75+
PendingItems.displayName = "PendingItems"
3476

35-
export default PendingItems
77+
// endregion

‎frontend/src/components/Pending/PendingUsers.tsx‎

Lines changed: 74 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,79 @@
1+
/**
2+
* @file Defines a PendingUsers component for displaying a table placeholder for users.
3+
* @description Renders a table with skeleton text placeholders for loading user data.
4+
* @module PendingUsers
5+
*/
6+
7+
"use client"
8+
19
import { Table } from "@chakra-ui/react"
10+
import type * as React from "react"
11+
import { useMemo } from "react"
12+
import type { FC } from "react"
213
import { SkeletonText } from "../ui/skeleton"
314

4-
const PendingUsers = () => (
5-
<Table.Root size={{ base: "sm", md: "md" }}>
6-
<Table.Header>
7-
<Table.Row>
8-
<Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
9-
<Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
10-
<Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
11-
<Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
12-
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
13-
</Table.Row>
14-
</Table.Header>
15-
<Table.Body>
16-
{[...Array(5)].map((_, index) => (
17-
<Table.Row key={index}>
18-
<Table.Cell>
19-
<SkeletonText noOfLines={1} />
20-
</Table.Cell>
21-
<Table.Cell>
22-
<SkeletonText noOfLines={1} />
23-
</Table.Cell>
24-
<Table.Cell>
25-
<SkeletonText noOfLines={1} />
26-
</Table.Cell>
27-
<Table.Cell>
28-
<SkeletonText noOfLines={1} />
29-
</Table.Cell>
30-
<Table.Cell>
31-
<SkeletonText noOfLines={1} />
32-
</Table.Cell>
15+
// region Type Aliases
16+
17+
/**
18+
* Props for the PendingUsers component.
19+
* @interface PendingUsersProps
20+
*/
21+
interface PendingUsersProps extends Record<string, never> {}
22+
23+
/**
24+
* Type alias for the PendingUsers component.
25+
* @type {PendingUsersComponent}
26+
*/
27+
type PendingUsersComponent = FC<PendingUsersProps>
28+
29+
// endregion
30+
31+
// region Main Code
32+
33+
/**
34+
* PendingUsers component for rendering a table with skeleton placeholders for user data.
35+
* @returns {React.ReactElement} The rendered PendingUsers component.
36+
*/
37+
export const PendingUsers: PendingUsersComponent = function PendingUsers(): React.ReactElement {
38+
const skeletonCell: React.ReactElement = <SkeletonText noOfLines={1} />
39+
const rows: React.ReactElement[] = useMemo(
40+
(): React.ReactElement[] =>
41+
Array(5)
42+
.fill(0)
43+
.map(
44+
(_: any, index: number): React.ReactElement => (
45+
<Table.Row key={index}>
46+
<Table.Cell>{skeletonCell}</Table.Cell>
47+
<Table.Cell>{skeletonCell}</Table.Cell>
48+
<Table.Cell>{skeletonCell}</Table.Cell>
49+
<Table.Cell>{skeletonCell}</Table.Cell>
50+
<Table.Cell>{skeletonCell}</Table.Cell>
51+
</Table.Row>
52+
),
53+
),
54+
[],
55+
)
56+
57+
return (
58+
<Table.Root size={{ base: "sm", md: "md" }}>
59+
<Table.Header>
60+
<Table.Row>
61+
<Table.ColumnHeader w="sm">Full name</Table.ColumnHeader>
62+
<Table.ColumnHeader w="sm">Email</Table.ColumnHeader>
63+
<Table.ColumnHeader w="sm">Role</Table.ColumnHeader>
64+
<Table.ColumnHeader w="sm">Status</Table.ColumnHeader>
65+
<Table.ColumnHeader w="sm">Actions</Table.ColumnHeader>
3366
</Table.Row>
34-
))}
35-
</Table.Body>
36-
</Table.Root>
37-
)
67+
</Table.Header>
68+
<Table.Body>{rows}</Table.Body>
69+
</Table.Root>
70+
)
71+
}
72+
73+
// endregion
74+
75+
// region Optional Declarations
76+
77+
PendingUsers.displayName = "PendingUsers"
3878

39-
export default PendingUsers
79+
// endregion

0 commit comments

Comments
 (0)