Added private API keys to the environment page, with some explanatory text

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.environments/route.tsx

@@ -47,6 +47,7 @@ import {
 import { requestUrl } from "~/utils/requestUrl.server";
 import { RuntimeEnvironmentType } from "../../../../../packages/database/src";
 import { ConfigureEndpointSheet } from "./ConfigureEndpointSheet";
+import { Badge } from "~/components/primitives/Badge";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   const userId = await requireUserId(request);
@@ -146,17 +147,38 @@ export default function Page() {
                   <Header2>API Keys</Header2>
                   <HelpTrigger title="How do I use API Keys and Endpoints?" />
                 </div>
-                <div className="mb-8 mt-4 flex gap-4">
-                  {environments.map((environment) => (
-                    <ClipboardField
-                      key={environment.id}
-                      fullWidth={false}
-                      secure
-                      value={environment.apiKey}
-                      variant={"primary/medium"}
-                      icon={<EnvironmentLabel environment={environment} />}
-                    />
-                  ))}
+                <div className="mb-8">
+                  <Paragraph variant="small" spacing>
+                    Secret API keys should be used on your server – they give
+                    full API access. <br />
+                    Public API keys should be used in your frontend – they have
+                    limited read-only access.
+                  </Paragraph>
+                  <div className="mt-4 flex flex-col gap-6">
+                    {environments.map((environment) => (
+                      <div key={environment.id}>
+                        <Header3 className="flex items-center gap-1">
+                          <EnvironmentLabel environment={environment} />{" "}
+                          Environment
+                        </Header3>
+                        <div className="mt-2 inline-flex flex-col gap-3">
+                          <ClipboardField
+                            className="w-full max-w-none"
+                            secure
+                            value={environment.apiKey}
+                            variant={"primary/medium"}
+                            icon={<Badge variant="outline">Secret</Badge>}
+                          />
+                          <ClipboardField
+                            className="w-full max-w-none"
+                            value={environment.pkApiKey}
+                            variant={"primary/medium"}
+                            icon={<Badge variant="outline">Public</Badge>}
+                          />
+                        </div>
+                      </div>
+                    ))}
+                  </div>
                 </div>
 
                 <Header2 className="mb-2">Endpoints</Header2>