Extract env var into component

src/admin/AdminAppConfigurationClient.tsx

@@ -25,10 +25,10 @@ import WarningNote from '@/components/WarningNote';
 import { RiSpeedMiniLine } from 'react-icons/ri';
 import Link from 'next/link';
 import SecretGenerator from '../app-core/SecretGenerator';
-import CopyButton from '@/components/CopyButton';
 import { PiPaintBrushHousehold } from 'react-icons/pi';
 import { IoMdGrid } from 'react-icons/io';
 import { CgDebug } from 'react-icons/cg';
+import EnvVar from '@/components/EnvVar';
 
 export default function AdminAppConfigurationClient({
   // Storage
@@ -131,33 +131,10 @@ export default function AdminAppConfigurationClient({
         </>}
     </>;
 
-  const renderEnvVar = (
-    variable: string,
-    minimal?: boolean,
-  ) =>
-    <div
-      key={variable}
-      className={clsx(
-        'overflow-x-auto overflow-y-hidden',
-        minimal && 'inline-flex',
-      )}
-    >
-      <span className="inline-flex items-center gap-1">
-        <span className={clsx(
-          'text-[11px] font-medium tracking-wider',
-          'px-0.5 py-[0.5px]',
-          'rounded-[5px]',
-          'bg-gray-100 dark:bg-gray-800',
-        )}>
-          `{variable}`
-        </span>
-        {!minimal && <CopyButton label={variable} text={variable} subtle />}
-      </span>
-    </div>;
-
   const renderEnvVars = (variables: string[]) =>
-    <div className="pt-1 space-y-1">
-      {variables.map(envVar => renderEnvVar(envVar))}
+    <div className="pt-1 flex flex-col gap-1">
+      {variables.map(envVar =>
+        <EnvVar key={envVar} variable={envVar} />)}
     </div>;
 
   const renderSubStatus = (

src/admin/insights/AdminAppInsights.tsx

@@ -20,6 +20,8 @@ import {
 } from '@/app-core/config';
 import { getGitHubMetaWithFallback } from '../github';
 
+const BASIC_PHOTO_INSTALLATION_COUNT = 32;
+
 const owner   = VERCEL_GIT_REPO_OWNER;
 const repo    = VERCEL_GIT_REPO_SLUG;
 const branch  = VERCEL_GIT_BRANCH;
@@ -67,7 +69,10 @@ export default async function AdminAppInsights() {
         noAi: !isAiTextGenerationEnabled,
         noAiRateLimiting: isAiTextGenerationEnabled && !hasVercelBlobStorage,
         photoMatting: photosCountPortrait > 0 && !MATTE_PHOTOS,
-        gridFirst: photosCount > 32 && !GRID_HOMEPAGE_ENABLED,
+        gridFirst: (
+          photosCount >= BASIC_PHOTO_INSTALLATION_COUNT &&
+          !GRID_HOMEPAGE_ENABLED
+        ),
         noStaticOptimization: !HAS_STATIC_OPTIMIZATION,
       }}
       photoStats={{

src/components/EnvVar.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx/lite';
+import CopyButton from './CopyButton';
+
+export default function EnvVar({
+  variable,
+  includeCopyButton = true,
+}: {
+  variable: string,
+  includeCopyButton?: boolean,
+}) {
+  return (
+    <div
+      className={clsx(
+        'inline-flex',
+        'overflow-x-auto overflow-y-hidden',
+      )}
+    >
+      <span className="inline-flex items-center gap-1">
+        <span className={clsx(
+          'text-[11px] font-medium tracking-wider',
+          'px-1 py-[0.5px]',
+          'rounded-[4px]',
+          'bg-gray-100 dark:bg-gray-800',
+        )}>
+          {variable}
+        </span>
+        {includeCopyButton &&
+          <CopyButton label={variable} text={variable} subtle />}
+      </span>
+    </div>
+  );
+}