Add HeaderComponent #27
Conversation
|
|
||
| import Status from "../statusComponent/StatusComponent"; | ||
|
|
||
| import { StatusProps } from "../statusComponent/type"; |
There was a problem hiding this comment.
| import Status from "../statusComponent/StatusComponent"; | |
| import { StatusProps } from "../statusComponent/type"; | |
| import Status from "../statusComponent/StatusComponent"; | |
| import { StatusProps } from "../statusComponent/type"; |
front/src/app/page.tsx
Outdated
| @@ -2,12 +2,11 @@ | |||
|
|
|||
| import { useState } from "react"; | |||
| import useWebSocket from "react-use-websocket"; | |||
|
|
|||
| <div className="flex flex-row justify-center"> | ||
| <div className="pt-10 pb-20 px-10"> | ||
| <div className="flex flex-row min-w-fit justify-center flex-nowrap text-nowrap"> | ||
| <div className="basis-1/4 flex flex-col justify-center items-center"> |
There was a problem hiding this comment.
I think there's some magic in there which broke the page center alignment when being removed.
tschanomis
force-pushed
the
headerComponent
branch
2 times, most recently
from
d66ca15 to
9d14042
Compare
| server: Server; | ||
| } | ||
|
|
||
| // Define the color and icon the status column |
There was a problem hiding this comment.
| // Define the color and icon the status column | |
| // Define color and icon of the status column |
|
|
||
| useEffect(() => { | ||
| if (!dataEquality) { | ||
| console.log("change detected"); |
There was a problem hiding this comment.
| console.log("change detected"); |
|
|
||
| return ( | ||
| servers.map((server) => ( | ||
| <tr ref={React.createRef()} key={category + server.planCode} className={`${changedRows.has(server.planCode) ? 'bg-yellow-200' : 'transition duration-1000 delay-150 even:bg-blue-300 odd:bg-blue-100'} font-mono`}> |
There was a problem hiding this comment.
Please keep the odd/even colors.
| lastMessage, | ||
| }: StatusProps) { | ||
| return ( | ||
| <div className="HeaderComponent flex justify-evenly w-full"> |
There was a problem hiding this comment.
What is this HeaderComponent class used for ?
| const ordered: CategoryOrder = { ...categoryOrder, ...serversByCategory }; | ||
|
|
||
| return ( | ||
| <table className="text-nowrap border-separate border-spacing-x-0 border-spacing-y-4"> |
There was a problem hiding this comment.
No need for vertical spacing, this table is already quite big.
There was a problem hiding this comment.
minimum to spacing-y-2
| <td>{server.storage}</td> | ||
| <td>{server.bandwidth}</td> | ||
| <td>{`${server.price} ${server.currencyCode}`}</td> | ||
| <td className="flex justify-end py-6"> |
There was a problem hiding this comment.
Why is this py-6 here instead of the tr ? This should also be reduced to reduce vertical space used.
There was a problem hiding this comment.
not working on tr but removed
| const serversByCategory = Object.groupBy(data, (server: Server) => server.category); | ||
|
|
||
| // Merge the server and respect the categories order | ||
| const ordered: CategoryOrder = { ...categoryOrder, ...serversByCategory }; |
There was a problem hiding this comment.
It would be nice to filter out categories with no servers
| const ordered: CategoryOrder = { ...categoryOrder, ...serversByCategory }; | ||
|
|
||
| return ( | ||
| <table className="text-nowrap border-separate border-spacing-x-0 border-spacing-y-2"> |
There was a problem hiding this comment.
I would rather not have the border-spacing-y-0 it makes reading the table harder I find
| <table className="text-nowrap border-separate border-spacing-x-0 border-spacing-y-2"> | |
| <table className="text-nowrap border-separate border-spacing-x-0"> |
| lastMessage, | ||
| }: StatusProps) { | ||
| return ( | ||
| <div className="flex justify-evenly w-full"> |
There was a problem hiding this comment.
I would suggest different spacing for the header with ...
| <div className="flex justify-evenly w-full"> | |
| <div className="flex justify-evenly w-full p-2"> |
| <thead> | ||
| <tr> | ||
| {columnsHead.map((columnHead) => ( | ||
| <th key={columnHead} className="p-4"> |
There was a problem hiding this comment.
... and
| <th key={columnHead} className="p-4"> | |
| <th key={columnHead} className="p-2"> |
tschanomis
force-pushed
the
headerComponent
branch
from
6fbd3e8 to
e96f759
Compare
Move the page header into a new HeaderComponent.