chore: partners/sponsors page (#7991)

Co-authored-by: Brian Muenzenmeyer <[email protected]>
Co-authored-by: Claudio Wunder <[email protected]>
Co-authored-by: Caner Akdas <[email protected]>

Author: 4 people

apps/site/components/Common/Partners/PartnerIcon/index.module.css

@@ -0,0 +1,13 @@
+@reference "../../../../styles/index.css";
+
+.partnerIcon {
+  @apply h-9
+    w-auto
+    min-w-9
+    p-2;
+
+  svg {
+    @apply !h-4
+      !w-auto;
+  }
+}

apps/site/components/Common/Partners/PartnerIcon/index.tsx

@@ -0,0 +1,34 @@
+import Skeleton from '@node-core/ui-components/Common/Skeleton';
+import Tooltip from '@node-core/ui-components/Common/Tooltip';
+import type { ComponentProps, FC } from 'react';
+import { cloneElement } from 'react';
+
+import Button from '#site/components/Common/Button';
+import type { Partners } from '#site/types';
+
+import style from './index.module.css';
+
+type PartnersIconProps = Partners & ComponentProps<typeof Skeleton>;
+
+const PartnersIcon: FC<PartnersIconProps> = ({ name, href, logo, loading }) => (
+  <Skeleton loading={loading} className="size-9 p-2">
+    <Tooltip
+      content={
+        <div className="p-2 text-neutral-900 dark:text-neutral-200">{name}</div>
+      }
+    >
+      <Button
+        kind="secondary"
+        href={`${href}/?utm_source=nodejs-website&utm_medium=Link`}
+        className={style.partnerIcon}
+      >
+        {cloneElement(logo, {
+          width: '100%',
+          height: '16px',
+        })}
+      </Button>
+    </Tooltip>
+  </Skeleton>
+);
+
+export default PartnersIcon;

apps/site/components/Common/Partners/PartnerLogo/index.module.css

@@ -0,0 +1,19 @@
+@reference "../../../../styles/index.css";
+
+.partnerIcon {
+  @apply flex
+    h-28
+    max-h-28
+    w-auto
+    min-w-12
+    items-center
+    justify-center
+    rounded-lg
+    p-6
+    sm:p-10;
+
+  svg {
+    @apply !h-12
+      !w-auto;
+  }
+}

apps/site/components/Common/Partners/PartnerLogo/index.tsx

@@ -0,0 +1,27 @@
+import Skeleton from '@node-core/ui-components/Common/Skeleton';
+import type { ComponentProps, FC } from 'react';
+import { cloneElement } from 'react';
+
+import Button from '#site/components/Common/Button';
+import type { Partners } from '#site/types';
+
+import style from './index.module.css';
+
+type PartnersLogoProps = Partners & ComponentProps<typeof Skeleton>;
+
+const PartnersLogo: FC<PartnersLogoProps> = ({ href, logo, loading }) => (
+  <Skeleton loading={loading} className="h-28 w-full p-2">
+    <Button
+      kind="secondary"
+      href={`${href}/?utm_source=nodejs-website&utm_medium=Link`}
+      className={style.partnerIcon}
+    >
+      {cloneElement(logo, {
+        width: '100%',
+        height: '16px',
+      })}
+    </Button>
+  </Skeleton>
+);
+
+export default PartnersLogo;

apps/site/components/Common/Partners/PartnersIconList/index.module.css

@@ -0,0 +1,9 @@
+@reference "../../../../styles/index.css";
+
+.partnersIconList {
+  @apply flex
+    flex-row
+    flex-wrap
+    items-center
+    gap-2;
+}

apps/site/components/Common/Partners/PartnersIconList/index.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import type { FC } from 'react';
+
+import usePartnersList from '#site/hooks/react-client/usePartnersList';
+import { ICON_PARTNERS } from '#site/next.partners.constants';
+import type { PartnerCategory } from '#site/types';
+
+import PartnerIcon from '../PartnerIcon';
+import style from './index.module.css';
+
+type PartnersIconListProps = {
+  maxLength?: number;
+  categories?: PartnerCategory;
+};
+
+const PartnersIconList: FC<PartnersIconListProps> = ({
+  maxLength = 6,
+  categories,
+}) => {
+  const { seedList, initialRenderer } = usePartnersList({
+    logos: ICON_PARTNERS,
+    maxLength,
+    categories,
+  });
+
+  return (
+    <div className={style.partnersIconList}>
+      {seedList.map((partner, index) => (
+        <PartnerIcon
+          {...partner}
+          key={index}
+          loading={initialRenderer.current}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default PartnersIconList;

apps/site/components/Common/Partners/PartnersLogoList/index.module.css

@@ -0,0 +1,8 @@
+@reference "../../../../styles/index.css";
+
+.partnersLogoList {
+  @apply grid
+    w-full
+    grid-cols-[repeat(auto-fill,minmax(240px,1fr))]
+    gap-4;
+}

apps/site/components/Common/Partners/PartnersLogoList/index.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { FC } from 'react';
+
+import usePartnersList from '#site/hooks/react-client/usePartnersList';
+import { LOGO_PARTNERS } from '#site/next.partners.constants';
+import type { PartnerCategory } from '#site/types';
+
+import PartnerLogo from '../PartnerLogo';
+import style from './index.module.css';
+
+type PartnersLogoListProps = {
+  maxLength?: number;
+  categories?: PartnerCategory;
+  sort?: 'name' | 'weight';
+};
+
+const PartnersLogoList: FC<PartnersLogoListProps> = ({
+  maxLength = 3,
+  sort = 'weight',
+  categories,
+}) => {
+  const { seedList, initialRenderer } = usePartnersList({
+    logos: LOGO_PARTNERS,
+    maxLength,
+    sort,
+    categories,
+  });
+
+  return (
+    <div className={style.partnersLogoList}>
+      {seedList.map((partner, index) => (
+        <PartnerLogo
+          {...partner}
+          key={index}
+          loading={initialRenderer.current}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default PartnersLogoList;

apps/site/components/Common/Partners/utils.ts

@@ -0,0 +1,23 @@
+import type { RandomPartnerListConfig, Partners } from '#site/types';
+import { shuffle } from '#site/util/array';
+
+async function randomPartnerList(
+  partners: Array<Partners>,
+  config: RandomPartnerListConfig
+): Promise<Array<Partners>> {
+  const { pick = 4, dateSeed = 5, category } = config;
+
+  // Generate a deterministic seed based on current time that changes every X minutes
+  const seed = Math.floor(Date.now() / (dateSeed * 60 * 1000));
+
+  // Filter by category if provided
+  const filtered = category
+    ? partners.filter(p => p.categories.includes(category))
+    : partners;
+
+  const shuffled = await shuffle(filtered, seed);
+
+  return shuffled.slice(0, pick ?? filtered.length);
+}
+
+export { randomPartnerList };

apps/site/components/Common/Supporters/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
+import type { FC } from 'react';
+
+import type { Supporters } from '#site/types';
+
+type SupportersListProps = {
+  supporters: Array<Supporters>;
+};
+
+const SupportersList: FC<SupportersListProps> = ({ supporters }) => (
+  <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
+    {supporters.map(({ name, image }, i) => (
+      <Avatar nickname={name} image={image} key={`${name}-${i}`} />
+    ))}
+  </div>
+);
+
+export default SupportersList;