Skip to content

Commit 4817cca

Browse files
tracyyhtracyyh
committed
make logo component instead
1 parent 09e7be2 commit 4817cca

File tree

4 files changed

+44
-72
lines changed

4 files changed

+44
-72
lines changed

‎apps/web/src/app/(pages)/(dashboard)/companies/company/page.tsx

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
"use client";
22

3-
import { useState } from "react";
4-
import Image from "next/image";
53
import { useSearchParams } from "next/navigation";
64

5+
import Logo from "@cooper/ui/logo";
6+
77
import RenderAllRoles from "~/app/_components/companies/all-company-roles";
88
import { CompanyAbout } from "~/app/_components/companies/company-about";
99
import { CompanyReview } from "~/app/_components/companies/company-reviews";
@@ -16,12 +16,6 @@ export default function Company() {
1616
const companyID = searchParams.get("id");
1717

1818
const company = api.company.getById.useQuery({ id: companyID ?? "" });
19-
const rawWebsite = company.data?.website;
20-
const website =
21-
rawWebsite && rawWebsite !== ""
22-
? rawWebsite.replace(/^(https?:\/\/)/, "")
23-
: `${company.data?.name.replace(/\s/g, "")}.com`;
24-
const [imageError, setImageError] = useState(false);
2519

2620
return (
2721
<>
@@ -30,20 +24,7 @@ export default function Company() {
3024
<div className="mb-6 mt-6 flex items-center justify-between">
3125
<div className="flex items-center">
3226
<div className="mr-3 flex h-16 w-16 items-center justify-center">
33-
{imageError ? (
34-
<div className="flex aspect-square h-16 w-16 items-center justify-center rounded-md bg-cooper-gray-200 text-4xl font-bold text-white">
35-
{company.data?.name.charAt(0)}
36-
</div>
37-
) : (
38-
<Image
39-
src={`https://img.logo.dev/${website}?token=pk_DNxGM2gHTjiLU3p79GX79A`}
40-
width={80}
41-
height={80}
42-
alt={`Logo of ${company.data?.name}`}
43-
className="rounded-md"
44-
onError={() => setImageError(true)}
45-
/>
46-
)}
27+
{company.data && <Logo company={company.data} size="small" />}
4728
</div>
4829
<div>
4930
<h1 className="text-4xl font-bold">{company.data?.name}</h1>

‎apps/web/src/app/_components/companies/company-card-preview.tsx

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { useState } from "react";
2-
import Image from "next/image";
3-
41
import type { CompanyType } from "@cooper/db/schema";
52
import { Card, CardContent, CardHeader, CardTitle } from "@cooper/ui/card";
3+
import Logo from "@cooper/ui/logo";
64

75
import { api } from "~/trpc/react";
86
import { prettyLocationName } from "~/utils/locationHelpers";
@@ -18,32 +16,12 @@ export function CompanyCardPreview({ companyObj }: CompanyCardPreviewProps) {
1816
companyId: companyObj.id,
1917
});
2018

21-
const rawWebsite = companyObj.website;
22-
const website =
23-
rawWebsite && rawWebsite !== ""
24-
? rawWebsite.replace(/^(https?:\/\/)/, "")
25-
: `${companyObj.name.replace(/\s/g, "")}.com`;
26-
const [imageError, setImageError] = useState(false);
27-
2819
return (
2920
<Card className="flex h-[26rem] w-[100%] flex-col justify-between overflow-hidden rounded-lg border-[0.75px] border-cooper-gray-400">
3021
<div>
3122
<CardHeader className="pb-3">
3223
<div className="flex items-center justify-start space-x-4">
33-
{imageError ? (
34-
<div className="flex aspect-square h-16 w-16 items-center justify-center rounded-md bg-cooper-gray-200 text-4xl font-bold text-white">
35-
{companyObj.name.charAt(0)}
36-
</div>
37-
) : (
38-
<Image
39-
src={`https://img.logo.dev/${website}?token=pk_DNxGM2gHTjiLU3p79GX79A`}
40-
width={75}
41-
height={75}
42-
alt={`Logo of ${companyObj.name}`}
43-
className="h-20 w-20 rounded-lg"
44-
onError={() => setImageError(true)}
45-
/>
46-
)}
24+
<Logo company={companyObj} />
4725
<div>
4826
<CardTitle className="text-xl">{companyObj.name}</CardTitle>
4927
</div>

‎apps/web/src/app/_components/reviews/role-info.tsx

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
"use client";
2-
3-
import { useState } from "react";
41
import Image from "next/image";
52
import Link from "next/link";
63

74
import type { ReviewType, RoleType } from "@cooper/db/schema";
85
import { cn } from "@cooper/ui";
96
import { CardContent, CardHeader, CardTitle } from "@cooper/ui/card";
7+
import Logo from "@cooper/ui/logo";
108

119
import { api } from "~/trpc/react";
1210
import { prettyLocationName } from "~/utils/locationHelpers";
@@ -54,27 +52,6 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
5452
"Transportation covered": averages.data.freeTransportation,
5553
};
5654

57-
const rawWebsite = companyData?.website;
58-
const website =
59-
rawWebsite && rawWebsite !== ""
60-
? rawWebsite.replace(/^(https?:\/\/)/, "")
61-
: `${companyData?.name.replace(/\s/g, "")}.com`;
62-
const [imageError, setImageError] = useState(false);
63-
const companyLogo = imageError ? (
64-
<div className="flex aspect-square h-16 w-16 items-center justify-center rounded-md bg-cooper-gray-200 text-4xl font-bold text-white">
65-
{companyData?.name.charAt(0)}
66-
</div>
67-
) : (
68-
<Image
69-
src={`https://img.logo.dev/${website}?token=pk_DNxGM2gHTjiLU3p79GX79A`}
70-
width={80}
71-
height={80}
72-
alt={`Logo of ${companyData?.name}`}
73-
className="h-20 w-20 rounded-lg"
74-
onError={() => setImageError(true)}
75-
/>
76-
);
77-
7855
return (
7956
<div
8057
className={cn(
@@ -86,7 +63,7 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
8663
<CardHeader className="pb-3">
8764
<div className="flex items-center justify-start space-x-4">
8865
{companyData ? (
89-
companyLogo
66+
<Logo company={companyData} />
9067
) : (
9168
<div className="h-20 w-20 rounded-lg border bg-cooper-blue-200"></div>
9269
)}
@@ -146,7 +123,7 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
146123
<div className="h-full" id="company">
147124
<InfoCard title={`About ${companyData.name}`}>
148125
<div className="flex gap-4 overflow-scroll text-[#5a5a5a]">
149-
{companyLogo}
126+
<Logo company={companyData} />
150127
<p className="h-40 overflow-scroll">
151128
{companyData.description}
152129
</p>

‎packages/ui/src/logo.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import Image from "next/image";
5+
6+
import { CompanyType } from "../../db/src/schema/companies";
7+
8+
interface ILogoProps {
9+
company: CompanyType;
10+
size?: "small" | "default";
11+
}
12+
13+
const Logo: React.FC<ILogoProps> = ({ company, size }) => {
14+
const rawWebsite = company.website;
15+
const website =
16+
rawWebsite && rawWebsite !== ""
17+
? rawWebsite.replace(/^(https?:\/\/)/, "")
18+
: `${company.name.replace(/\s/g, "")}.com`;
19+
const [imageError, setImageError] = useState(false);
20+
return imageError ? (
21+
<div className="flex aspect-square max-h-20 min-h-16 min-w-16 max-w-20 items-center justify-center rounded-md bg-cooper-gray-200 text-4xl font-bold text-white">
22+
{company.name.charAt(0)}
23+
</div>
24+
) : (
25+
<Image
26+
src={`https://img.logo.dev/${website}?token=pk_DNxGM2gHTjiLU3p79GX79A`}
27+
width={80}
28+
height={80}
29+
alt={`Logo of ${company.name}`}
30+
className={`${size === "small" ? "" : "h-20 w-20"} rounded-lg`}
31+
onError={() => setImageError(true)}
32+
/>
33+
);
34+
};
35+
36+
export default Logo;

0 commit comments

Comments
 (0)