Merge branch 'main' into company-filter

Author: gpalmer27

apps/web/next.config.js

@@ -26,7 +26,7 @@ const config = {
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "logo.clearbit.com",
+        hostname: "img.logo.dev",
         port: "",
         pathname: "/**",
       },

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

@@ -1,8 +1,9 @@
 "use client";
 
-import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 
+import Logo from "@cooper/ui/logo";
+
 import RenderAllRoles from "~/app/_components/companies/all-company-roles";
 import { CompanyAbout } from "~/app/_components/companies/company-about";
 import { CompanyReview } from "~/app/_components/companies/company-reviews";
@@ -23,13 +24,7 @@ export default function Company() {
           <div className="mb-6 mt-6 flex items-center justify-between">
             <div className="flex items-center">
               <div className="mr-3 flex h-16 w-16 items-center justify-center">
-                <Image
-                  src={`https://logo.clearbit.com/${company.data?.name.replace(/\s/g, "")}.com`}
-                  width={80}
-                  height={80}
-                  alt={`Logo of ${company.data?.name}`}
-                  className="rounded-md"
-                />
+                {company.data && <Logo company={company.data} size="small" />}
               </div>
               <div>
                 <h1 className="text-4xl font-bold">{company.data?.name}</h1>

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

@@ -1,7 +1,6 @@
-import Image from "next/image";
-
 import type { CompanyType } from "@cooper/db/schema";
 import { Card, CardContent, CardHeader, CardTitle } from "@cooper/ui/card";
+import Logo from "@cooper/ui/logo";
 
 import { api } from "~/trpc/react";
 import { prettyLocationName } from "~/utils/locationHelpers";
@@ -22,13 +21,7 @@ export function CompanyCardPreview({ companyObj }: CompanyCardPreviewProps) {
       <div>
         <CardHeader className="pb-3">
           <div className="flex items-center justify-start space-x-4">
-            <Image
-              src={`https://logo.clearbit.com/${companyObj.name.replace(/\s/g, "")}.com`}
-              width={75}
-              height={75}
-              alt={`Logo of ${companyObj.name}`}
-              className="h-20 w-20 rounded-lg"
-            />
+            <Logo company={companyObj} />
             <div>
               <CardTitle className="text-xl">{companyObj.name}</CardTitle>
             </div>

apps/web/src/app/_components/footer.tsx

@@ -30,8 +30,8 @@ export default function Footer() {
             Submit Feedback or Bug Reports!
           </h2>
         </Link>
-        <a href="https://clearbit.com" target="_blank" className="italic">
-          Logos provided by Clearbit
+        <a href="https://logo.dev" target="_blank" className="italic">
+          Logos provided by Logo.dev
         </a>
       </div>
     </footer>

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

@@ -1,11 +1,10 @@
-"use client";
-
 import Image from "next/image";
 import Link from "next/link";
 
 import type { ReviewType, RoleType } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
 import { CardContent, CardHeader, CardTitle } from "@cooper/ui/card";
+import Logo from "@cooper/ui/logo";
 
 import { api } from "~/trpc/react";
 import { prettyLocationName } from "~/utils/locationHelpers";
@@ -64,13 +63,7 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
         <CardHeader className="pb-3">
           <div className="flex items-center justify-start space-x-4">
             {companyData ? (
-              <Image
-                src={`https://logo.clearbit.com/${companyData.name.replace(/\s/g, "")}.com`}
-                width={80}
-                height={80}
-                alt={`Logo of ${companyData.name}`}
-                className="h-20 w-20 rounded-lg"
-              />
+              <Logo company={companyData} />
             ) : (
               <div className="h-20 w-20 rounded-lg border bg-cooper-blue-200"></div>
             )}
@@ -130,13 +123,7 @@ export function RoleInfo({ className, roleObj }: RoleCardProps) {
             <div className="h-full" id="company">
               <InfoCard title={`About ${companyData.name}`}>
                 <div className="flex gap-4 overflow-scroll text-[#5a5a5a]">
-                  <Image
-                    src={`https://logo.clearbit.com/${companyData.name.replace(/\s/g, "")}.com`}
-                    width={80}
-                    height={80}
-                    alt={`Logo of ${companyData.name}`}
-                    className="h-20 w-20 rounded-lg"
-                  />
+                  <Logo company={companyData} />
                   <p className="h-40 overflow-scroll">
                     {companyData.description}
                   </p>

packages/ui/src/logo.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+import type { CompanyType } from "../../db/src/schema/companies";
+
+interface ILogoProps {
+  company: CompanyType;
+  size?: "small" | "default";
+}
+
+const Logo: React.FC<ILogoProps> = ({ company, size }) => {
+  const rawWebsite = company.website;
+  const website =
+    rawWebsite && rawWebsite !== ""
+      ? rawWebsite.replace(/^(https?:\/\/)/, "")
+      : `${company.name.replace(/\s/g, "")}.com`;
+  const [imageError, setImageError] = useState(false);
+  return imageError ? (
+    <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">
+      {company.name.charAt(0)}
+    </div>
+  ) : (
+    <Image
+      src={`https://img.logo.dev/${website}?token=pk_DNxGM2gHTjiLU3p79GX79A`}
+      width={80}
+      height={80}
+      alt={`Logo of ${company.name}`}
+      className={`${size === "small" ? "" : "h-20 w-20"} rounded-lg`}
+      onError={() => setImageError(true)}
+    />
+  );
+};
+
+export default Logo;