1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React from "react";
import cn from "classnames";
import Image from "next/image";
import { TurboUser } from "./users";
const DEFAULT_SIZE = {
width: 100,
height: 75,
};
export function Logo({
user,
theme,
isLink,
}: {
user: TurboUser;
theme: "dark" | "light";
isLink: boolean;
}) {
const styles = {
...DEFAULT_SIZE,
...user.style,
};
let numericWidth: number;
let numericHeight: number;
if (typeof styles.width === "number") {
numericWidth = styles.width;
}
if (typeof styles.height === "number") {
numericHeight = styles.height;
}
const logo = (
<Image
src={user.image.replace(
"/logos",
theme === "light" ? "/logos/white" : "/logos/color"
)}
alt={`${user.caption}'s Logo`}
width={numericWidth}
height={numericHeight}
priority={true}
style={styles}
className={cn("mx-8", {
"hidden dark:inline": theme !== "dark",
"dark:hidden inline": theme === "dark",
})}
/>
);
if (isLink) {
return (
<a
href={user.infoLink}
target="_blank"
rel="noopener noreferrer"
className={cn("flex justify-center item-center", {
"hidden dark:flex": theme !== "dark",
"dark:hidden flex": theme === "dark",
})}
>
{logo}
</a>
);
}
return logo;
}
|