-
Notifications
You must be signed in to change notification settings - Fork 265
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'clean' of https://github.com/hngprojects/hng_boilerplat…
…e_nextjs into clean
- Loading branch information
Showing
21 changed files
with
495 additions
and
34 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| const DropdownMenu = ({ | ||
| width, | ||
| active, | ||
| children, | ||
| }: { | ||
| width: string; | ||
| active: boolean; | ||
| children: React.ReactNode; | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <div | ||
| className={`absolute bottom-0 top-full z-20 mt-2 h-fit overflow-hidden rounded-md bg-white p-2 shadow ring-1 ring-border duration-200 ease-in md:right-0 ${width} ${active ? "visible translate-y-0 opacity-100" : "invisible -translate-y-[10px] opacity-0"}`} | ||
| > | ||
| {children} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DropdownMenu; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .user-table::-webkit-scrollbar { | ||
| width: 0; | ||
| display: none; | ||
| } |
15 changes: 15 additions & 0 deletions
15
src/app/dashboard/(admin)/admin/users/component/userTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import UserTableBody from "./userTableBody"; | ||
| import UserTableHead from "./userTableHead"; | ||
|
|
||
| const UserTable = () => { | ||
| return ( | ||
| <> | ||
| <table className="user-table w-full overflow-x-hidden"> | ||
| <UserTableHead /> | ||
| <UserTableBody /> | ||
| </table> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserTable; |
135 changes: 135 additions & 0 deletions
135
src/app/dashboard/(admin)/admin/users/component/userTableBody.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import { EllipsisVertical } from "lucide-react"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { useEffect, useRef, useState } from "react"; | ||
|
|
||
| import DropdownMenu from "../../../_components/ui/dropdownMenu"; | ||
| import { userData, UserDataProperties } from "../data/user-dummy-data"; | ||
|
|
||
| const UserTableBody = () => { | ||
| const [showDropdown, setShowDropdown] = useState< | ||
| UserDataProperties | undefined | ||
| >(); | ||
| const menuReference = useRef<HTMLDivElement>(null); | ||
| const [open, setOpen] = useState<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| const handler = (event: MouseEvent) => { | ||
| if ( | ||
| menuReference.current && | ||
| !menuReference.current.contains(event.target as Node) | ||
| ) { | ||
| setShowDropdown(undefined); | ||
| setOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", handler); | ||
|
|
||
| // Cleanup function | ||
| return () => { | ||
| document.removeEventListener("mousedown", handler); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <tbody className="user-table"> | ||
| {userData.map((data, index) => { | ||
| const { avatar, date, email, fullName, phone, status } = data; | ||
|
|
||
| return ( | ||
| <tr key={index} className="w-full border-b border-b-border"> | ||
| <td | ||
| className={`whitespace-nowrap p-4 text-left text-base font-normal capitalize leading-4 text-neutral-dark-2`} | ||
| > | ||
| <div className="flex flex-row items-center gap-2"> | ||
| <div className="h-10 w-10 overflow-hidden rounded-full"> | ||
| <Image | ||
| src={avatar} | ||
| className="object-cover" | ||
| height={40} | ||
| width={40} | ||
| alt={fullName} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <h3 className="text-base font-[500] leading-6 text-neutral-dark-2"> | ||
| {fullName} | ||
| </h3> | ||
| <div className="text-sm font-normal lowercase leading-4 text-neutral-dark-1"> | ||
| {email} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </td> | ||
|
|
||
| <td | ||
| className={`gap-2 whitespace-nowrap p-4 text-left text-base font-normal capitalize leading-4 text-neutral-dark-2`} | ||
| > | ||
| {phone} | ||
| </td> | ||
|
|
||
| <td | ||
| className={`whitespace-nowrap p-4 text-left text-base font-normal capitalize leading-4 text-neutral-dark-2`} | ||
| > | ||
| {date} | ||
| </td> | ||
|
|
||
| <td | ||
| className={`whitespace-nowrap p-4 text-left text-base font-normal capitalize leading-4 text-neutral-dark-2`} | ||
| > | ||
| <div className="flex items-center gap-1"> | ||
| {status.active && ( | ||
| <> | ||
| <div className="h-3 w-3 rounded-full bg-success"></div> | ||
| <div>Active</div> | ||
| </> | ||
| )} | ||
|
|
||
| {!status.active && ( | ||
| <> | ||
| <div className="h-3 w-3 rounded-full bg-error"></div> | ||
| <div>Inactive</div> | ||
| </> | ||
| )} | ||
| </div> | ||
| </td> | ||
|
|
||
| <td className="whitespace-nowrap p-4 text-center text-base font-normal capitalize leading-4 text-neutral-dark-2"> | ||
| <div className="relative" ref={menuReference}> | ||
| <button | ||
| onClick={() => { | ||
| setShowDropdown(userData[index]); | ||
| setOpen(!open); | ||
| }} | ||
| className="outline-none" | ||
| > | ||
| <EllipsisVertical size={16} color="#09090b" /> | ||
| </button> | ||
|
|
||
| <DropdownMenu | ||
| width="w-[100px]" | ||
| active={showDropdown?.fullName === fullName && open} | ||
| > | ||
| <Link href={"#"} className="outline-none"> | ||
| <button className="block w-full px-2 py-1.5 text-left text-sm font-normal leading-5 text-neutral-dark-2"> | ||
| Edit | ||
| </button> | ||
| </Link> | ||
|
|
||
| <button className="block w-full px-2 py-1.5 text-left text-sm font-normal leading-5 text-neutral-dark-2"> | ||
| Delete | ||
| </button> | ||
| </DropdownMenu> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| ); | ||
| })} | ||
| </tbody> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserTableBody; |
30 changes: 30 additions & 0 deletions
30
src/app/dashboard/(admin)/admin/users/component/userTableHead.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| const tableHeadData: string[] = [ | ||
| "name", | ||
| "phone number", | ||
| "date created", | ||
| "status", | ||
| "action", | ||
| ]; | ||
|
|
||
| const UserTableHead = () => { | ||
| return ( | ||
| <> | ||
| <thead> | ||
| <tr className="bg-[#FFF7F2]"> | ||
| {tableHeadData.map((data, index) => { | ||
| return ( | ||
| <th | ||
| key={index} | ||
| className={`whitespace-nowrap p-4 text-left text-base font-normal capitalize leading-4 text-neutral-dark-2 ${data === "name" ? "w-[300px]" : data === "action" ? "w-[86px]" : "w-[202px]"}`} | ||
| > | ||
| {data} | ||
| </th> | ||
| ); | ||
| })} | ||
| </tr> | ||
| </thead> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default UserTableHead; |
Oops, something went wrong.