Create ScoreCard component

src/admin/AdminAppInsightsClient.tsx

@@ -2,10 +2,11 @@
 
 import IconGrSync from '@/app-core/IconGrSync';
 import Note from '@/components/Note';
+import ScoreCard from '@/components/ScoreCard';
+import ScoreCardRow from '@/components/ScoreCardRow';
 import WarningNote from '@/components/WarningNote';
 import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
 import clsx from 'clsx/lite';
-import { ReactNode } from 'react';
 import { HiSparkles } from 'react-icons/hi';
 import { PiWarningBold } from 'react-icons/pi';
 
@@ -54,19 +55,6 @@ export default function AdminAppInsightsClient({
       {title}
     </div>;
 
-  const renderRow = (icon: ReactNode, children: ReactNode) =>
-    <div className={clsx(
-      'flex items-center gap-4',
-      'px-4 py-2',
-    )}>
-      <div className="flex items-center gap-2 shrink-0">
-        {icon}
-      </div>
-      <div>
-        {children}
-      </div>
-    </div>;
-
   return (
     <div className={clsx(
       'flex flex-col items-center w-full',
@@ -76,31 +64,37 @@ export default function AdminAppInsightsClient({
         'w-full sm:w-[80%] lg:w-[60%]',
         'space-y-4 md:space-y-6',
       )}>
-        <div className="component-surface shadow-xs divide-y divide-main">
-          {renderRow(
-            <PiWarningBold
-              size={17}
-              className="translate-x-[0.5px] text-amber-600"
-            />,
-            'This fork is 9 commits behind',
-          )}
-          {renderRow(
-            <PiWarningBold
-              size={17}
-              className="translate-x-[0.5px] text-amber-600"
-            />,
-            'Consider enabling rate limiting to mitigate AI abuse',
-          )}
-          {renderRow(
-            <IconGrSync />,
-            // eslint-disable-next-line max-len
-            'Consider forking this repository to receive new features and fixes',
-          )}
-          {renderRow(
-            <HiSparkles />,
-            'Enable AI text generation in the app configuration',
-          )}
-        </div>
+        <ScoreCard>
+          <ScoreCardRow
+            icon={
+              <PiWarningBold
+                size={17}
+                className="translate-x-[0.5px] text-amber-600"
+              />
+            }
+          >
+            This fork is 9 commits behind
+          </ScoreCardRow>
+          <ScoreCardRow
+            icon={
+              <PiWarningBold
+                size={17}
+                className="translate-x-[0.5px] text-amber-600"
+              />}
+          >
+            Consider enabling rate limiting to mitigate AI abuse
+          </ScoreCardRow>
+          <ScoreCardRow
+            icon={<IconGrSync />}
+          >
+            Consider forking this repository to receive new features and fixes
+          </ScoreCardRow>
+          <ScoreCardRow
+            icon={<HiSparkles />}
+          >
+            Enable AI text generation in the app configuration
+          </ScoreCardRow>
+        </ScoreCard>
         {renderTitle('Code Observability')}
         {(fork || debug) &&
           <Note icon={<IconGrSync />}>

src/components/ScoreCard.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export default function ScoreCard({
+  children,
+}: {
+  children: ReactNode,
+}) {
+  return (
+    <div className="component-surface shadow-xs divide-y divide-main">
+      {children}
+    </div>
+  );
+}

src/components/ScoreCardRow.tsx

@@ -0,0 +1,29 @@
+import { clsx } from 'clsx';
+import { ReactNode } from 'react';
+export default function ScoreCardRow({
+  icon,
+  children,
+  details,
+}: {
+  icon: ReactNode
+  children: ReactNode
+  details?: string
+}) {
+  return (
+    <div className={clsx(
+      'flex items-center gap-4',
+      'px-4 py-2',
+    )}>
+      <div className="flex items-center gap-2 shrink-0">
+        {icon}
+      </div>
+      <div>
+        {children}
+      </div>
+      {details &&
+        <span className="text-sm text-gray-500">
+          {details}
+        </span>}
+    </div>
+  );
+}