From 6da15dfa861f837c165daa25fbd2eb0fd5443fe4 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 14 Feb 2025 08:53:20 -0600
Subject: [PATCH] Use <EnvVar /> component in insights

---
 src/admin/insights/AdminAppInsightsClient.tsx | 3 ++-
 src/components/EnvVar.tsx                     | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index 9cb35517..b38994c3 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -26,6 +26,7 @@ import {
   VERCEL_GIT_COMMIT_MESSAGE,
 } from '@/app-core/config';
 import { AdminAppInsight } from '.';
+import EnvVar from '@/components/EnvVar';
 
 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
@@ -145,7 +146,7 @@ export default function AdminAppInsightsClient({
           content="You seem to have several vertical photos—consider enabling matting to make portrait and landscape photos appear more consistent"
           additionalContent={<>
             Enabled photo matting by setting
-            <code className="text-main">`NEXT_PUBLIC_MATTE_PHOTOS = 1`</code>
+            <EnvVar variable="NEXT_PUBLIC_MATTE_PHOTOS" value="1" />
           </>}
         />
         <ScoreCardRow
diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx
index c4054349..535d6301 100644
--- a/src/components/EnvVar.tsx
+++ b/src/components/EnvVar.tsx
@@ -3,9 +3,11 @@ import CopyButton from './CopyButton';
 
 export default function EnvVar({
   variable,
+  value,
   includeCopyButton = true,
 }: {
   variable: string,
+  value?: string,
   includeCopyButton?: boolean,
 }) {
   return (
@@ -22,7 +24,7 @@ export default function EnvVar({
           'rounded-[4px]',
           'bg-gray-100 dark:bg-gray-800',
         )}>
-          {variable}
+          {variable}{value && ` = ${value}`}
         </span>
         {includeCopyButton &&
           <CopyButton label={variable} text={variable} subtle />}