Company page #148
Company page #148
Conversation
…orrect reviews, and proper css
…panies componenets
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| const company = api.company.getById.useQuery({ id: companyID ?? "" }); | ||
| const roles = api.role.getByCompany.useQuery({ companyId: companyID ?? "" }); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
probs can remove to fix linting stuff
| <div> | ||
| <h1 className="text-4xl font-bold">{company.data?.name}</h1> | ||
| <p className="text-lg text-gray-600"> | ||
| Co-op · {company.data?.industry.toLowerCase()} |
There was a problem hiding this comment.
Check the file :
packages/db/src/schema/misc.ts
To see what industry can be. Then in the frontend utils (stringHelpers.ts) make a function that takes in the db representation and makes it pretty ◡̈ (note e.g. FOODANDBEVERAGE should be Food and Beverage)
| ]; | ||
|
|
||
| return ( | ||
| <Card className="w-full max-w-lg rounded-xl border-gray-300 outline outline-[1px] outline-[#474747]"> |
There was a problem hiding this comment.
we can replace outline-[1px] with outline-1
|
|
||
| return ( | ||
| <Card className="w-full max-w-lg rounded-xl border-gray-300 outline outline-[1px] outline-[#474747]"> | ||
| <CardHeader className="border-b border-[#474747] bg-[#F7F7F7] pb-3"> |
There was a problem hiding this comment.
Let's remove pb-3 and replace it with h-6 flex justify-center.
The way I got h-6 was by using dev mode on the design to see it was 24px. Then I went to https://v3.tailwindcss.com/docs/size and found that h-6 corresponds to 24px.
|
|
||
| export function CompanyAbout({ companyObj }: CompanyAboutProps) { | ||
| return ( | ||
| <> |
There was a problem hiding this comment.
We can delete the <> and </> and {" "}
| import { api } from "~/trpc/react"; | ||
|
|
||
| export default function Company() { | ||
| const searchParams = useSearchParams(); |
There was a problem hiding this comment.
This is beautifullll , no useEffects or anything you ate
| </div> | ||
| </div> | ||
| <div className="m-4 flex items-center space-x-4"> | ||
| <p className="text-sm">{companyObj.description}</p> |
There was a problem hiding this comment.
One of the companies in my test db was really long and overflowed past what was visible in the card. The following code was able to fix that issue:
<p className="text-sm"> {(companyObj.description ?? "").slice( 0, Math.min(200, companyObj.description.length ?? 0), )} {companyObj.description.length > 200 && "..."} </p>
But this is chunky... so let's make a util in the stringHelpers.ts file 😈
| </div> | ||
|
|
||
| <div className="flex-1 space-y-2 pt-1"> | ||
| {ratings.map((rating) => ( |
There was a problem hiding this comment.
Let's maybe create a custom component for this, I think Matt could use it too
| </div> | ||
|
|
||
| <div className="flex-1 space-y-2 pt-1"> | ||
| {ratings.map((rating) => ( |
There was a problem hiding this comment.
Super beautiful so far tho 🤩
| </span> | ||
| <div className="ml-1 h-2 flex-1 rounded-full bg-gray-200"> | ||
| <div | ||
| className="h-full rounded-full bg-yellow-400" |
There was a problem hiding this comment.
Try and see if there is a way to apply the different shades of yellow like the design (I think you can make like a list of color strings and then based on the index of the map, fetch that color like className={cn("classes here", colors[idx])}
Description
Implemented companies page and company page front end!
(Isn't perfect yet but hey I wanted to make a PR, need to fix some styling~ I aint a tailwind warrior tho this is hard)
Created a components folder for companies related stuff, such as remaking the cards in the companies page to render all existing companies. When selected should be able to get to the specific company page with its available roles.
Currently, the review with rating in company page is just mock data place holder, will need to make ticket later to modify to actually connect to the end points.
There was also discussion on if location is still a field existing for company, because I think location should only exists for reviews now...?
But yea, another side note is right now the role area within company is really small and I think we want to let it able to take up more area of the screen - will deal with that later too.
Lastly, don't know if we want to use the cooper for when there's no roles. Is there another prettier UI there that fits more into the style of the page ?
Motivation and Context
Well you need a company page brother
Closes #[143]
How has this been tested?
ahahahha
Screenshots (if appropriate):
Types of changes
pnpm db:generateand verified generated SQL migration files inpackages/db/drizzleChecklist: