Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/app/public/logos/datologyai.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions packages/app/public/logos/firmus.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/app/src/components/page-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ export function PageContent({ initialTab = 'inference' }: { initialTab?: string
<div className="mt-4 pt-4 border-t border-border/50">
<QuoteCarousel
quotes={QUOTES.filter(
(q) => !['NVIDIA', 'AMD', 'Supermicro', 'Vultr'].includes(q.company),
(q) => !['NVIDIA', 'AMD', 'Supermicro', 'Vultr'].includes(q.org),
)}
overrides={{
order: ['OpenAI'],
Expand Down
30 changes: 15 additions & 15 deletions packages/app/src/components/quote-carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export interface CarouselQuote {
text: string;
name: string;
title: string;
company: string;
org: string;
logo?: string;
link?: string;
}
Expand All @@ -19,7 +19,7 @@ export interface QuoteCarouselProps {
overrides?: {
/** Companies pinned to the front in this order; rest are shuffled after */
order?: string[];
/** Override display names in the company strip */
/** Override display names in the org strip */
labels?: Record<string, string>;
};
/** Link to a page with all quotes */
Expand All @@ -38,27 +38,27 @@ function shuffleArray<T>(arr: T[]): T[] {
}

interface CompanyEntry {
company: string;
org: string;
quote: CarouselQuote;
}

function buildCompanyQuotes(quotes: CarouselQuote[], order?: string[]): CompanyEntry[] {
const byCompany = new Map<string, CarouselQuote[]>();
for (const q of quotes) {
const list = byCompany.get(q.company);
const list = byCompany.get(q.org);
if (list) list.push(q);
else byCompany.set(q.company, [q]);
else byCompany.set(q.org, [q]);
}
const entries = [...byCompany.entries()].map(([company, pool]) => ({
company,
const entries = [...byCompany.entries()].map(([org, pool]) => ({
org,
quote: pool[Math.floor(Math.random() * pool.length)],
}));
if (order?.length) {
const orderSet = new Set(order);
const pinned = order
.map((c) => entries.find((e) => e.company === c))
.map((c) => entries.find((e) => e.org === c))
.filter((e): e is CompanyEntry => !!e);
const rest = shuffleArray(entries.filter((e) => !orderSet.has(e.company)));
const rest = shuffleArray(entries.filter((e) => !orderSet.has(e.org)));
return [...pinned, ...rest];
}
return shuffleArray(entries);
Expand All @@ -71,7 +71,7 @@ function QuoteBlock({ quote }: { quote: CarouselQuote }) {
&ldquo;{highlightBrand(quote.text)}&rdquo;
</p>
<footer className="mt-3 flex items-center gap-3">
<CompanyLogo company={quote.company} logo={quote.logo} />
<CompanyLogo org={quote.org} logo={quote.logo} />
<div className="h-12 w-0.5 bg-secondary dark:bg-primary" />
<div className="text-sm">
<span className="font-semibold text-foreground">{quote.name}</span>
Expand All @@ -95,7 +95,7 @@ export function QuoteCarousel({
const [fading, setFading] = useState(false);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

// Build shuffled company order on mount (client only)
// Build shuffled org order on mount (client only)
useEffect(() => {
setEntries(buildCompanyQuotes(quotes, order));
}, [quotes, order]);
Expand Down Expand Up @@ -136,10 +136,10 @@ export function QuoteCarousel({
return (
<div className="flex flex-col gap-4">
{/* Company logo strip */}
<div className="flex flex-wrap items-center justify-evenly gap-x-4 gap-y-2 mx-4">
<div className="flex flex-wrap items-center justify-evenly gap-x-6 gap-y-2 mx-4">
{entries.map((e, i) => (
<button
key={e.company}
key={e.org}
type="button"
onClick={() => goTo(i)}
className={`text-xs font-semibold tracking-wide uppercase transition-opacity duration-200 ${
Expand All @@ -148,7 +148,7 @@ export function QuoteCarousel({
: 'opacity-40 text-muted-foreground hover:opacity-70'
}`}
>
{labels[e.company] ?? e.company}
{labels[e.org] ?? e.org}
</button>
))}
</div>
Expand All @@ -157,7 +157,7 @@ export function QuoteCarousel({
<div className="grid">
{entries.map((e, i) => (
<div
key={e.company}
key={e.org}
className={`col-start-1 row-start-1 transition-opacity duration-300 ease-in-out ${
i === activeIndex && !fading ? 'opacity-100' : 'opacity-0'
}`}
Expand Down
13 changes: 9 additions & 4 deletions packages/app/src/components/quotes/quote-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,26 @@

import { useState } from 'react';

export function CompanyLogo({ company, logo }: { company: string; logo?: string }) {
export function CompanyLogo({ org, logo }: { org: string; logo?: string }) {
const [failed, setFailed] = useState(false);

if (!logo || failed) {
return (
<div className="h-12 shrink-0 rounded-full bg-muted flex items-center justify-center px-3">
<span className="text-xs font-bold text-muted-foreground">{company[0]}</span>
<div className="size-10 shrink-0 rounded-full bg-muted flex items-center justify-center">
<span className="text-sm font-bold text-muted-foreground">
{org
.split(' ')
.map((w) => w[0])
.join('')}
</span>
</div>
);
}

return (
<img
src={`/logos/${logo}`}
alt={company}
alt={org}
className="h-10 min-w-10 max-w-20 shrink-0 object-contain grayscale opacity-70 dark:invert"
onError={() => setFailed(true)}
/>
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/components/quotes/quotes-content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ function QuoteCard({
text,
name,
title,
company,
org,
logo,
link,
}: {
text: string;
name: string;
title: string;
company: string;
org: string;
logo?: string;
link?: string;
}) {
Expand All @@ -26,7 +26,7 @@ function QuoteCard({
&ldquo;{highlightBrand(text)}&rdquo;
</p>
<footer className="flex items-center gap-3">
<CompanyLogo company={company} logo={logo} />
<CompanyLogo org={org} logo={logo} />
<div className="h-12 w-0.5 bg-secondary dark:bg-primary" />
<div className="text-sm">
<span className="font-semibold text-foreground">{name}</span>
Expand Down Expand Up @@ -75,7 +75,7 @@ export function QuotesContent() {
text={quote.text}
name={quote.name}
title={quote.title}
company={quote.company}
org={quote.org}
logo={quote.logo}
link={quote.link}
/>
Expand Down
Loading