44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/registry/bases/aria/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/bases/aria/ui/card"
|
|
|
|
export function EnvironmentVariables() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Environment Variables</CardTitle>
|
|
<CardDescription>Production · 8 variables</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-2">
|
|
{[
|
|
{ key: "DATABASE_URL", masked: true },
|
|
{ key: "NEXT_PUBLIC_API", masked: false },
|
|
{ key: "STRIPE_SECRET", masked: true },
|
|
].map((env) => (
|
|
<div
|
|
key={env.key}
|
|
className="flex items-center gap-2 rounded-md px-2.5 py-2 font-mono text-xs ring ring-border"
|
|
>
|
|
<span className="font-medium">{env.key}</span>
|
|
<span className="ml-auto text-muted-foreground">
|
|
{env.masked ? "••••••••" : "https://api.example.com"}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button variant="outline">Edit</Button>
|
|
<Button className="ml-auto">Deploy</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|