Government Banner

1"use client"
2 
3import { ChevronDown, FlaskConical, User } from "lucide-react"
4import {
5  Popover,
6  PopoverContent,
7  PopoverTrigger,
8} from "@/components/ui/popover"
9 
10export function GovBanner() {
11  return (
12    <div className="bg-treasury-base-lightest">
13      <div className="container mx-auto px-4">
14        <div className="flex items-center gap-2 py-1">
15          <img
16            src="/us-flag.svg"
17            alt="U.S. flag"
18            className="h-3 w-4"
19            aria-hidden="true"
20          />
21          <span className="text-treasury-ink text-xs">
22            This is a prototype — not an official government website
23          </span>
24          <Popover>
25            <PopoverTrigger className="text-treasury-primary hover:text-treasury-primary-dark flex items-center gap-1 underline text-xs group">
26              Here&apos;s the context
27              <ChevronDown className="h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-180" />
28            </PopoverTrigger>
29            <PopoverContent
30              align="center"
31              className="w-[min(calc(100vw-2rem),48rem)] bg-treasury-base-lightest border-treasury-base-light"
32            >
33              <div className="grid gap-4 md:grid-cols-2">
34                <div className="flex gap-3">
35                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-treasury-primary">
36                    <FlaskConical className="h-5 w-5 text-treasury-paper" />
37                  </div>
38                  <div>
39                    <p className="font-bold text-treasury-ink text-sm">
40                      This is a demo
41                    </p>
42                    <p className="text-xs text-treasury-base-dark">
43                      A prototype built for the{" "}
44                      <strong>Treasury IT Specialist (AI)</strong> hiring
45                      evaluation. Not connected to real TTB systems or data.
46                    </p>
47                  </div>
48                </div>
49                <div className="flex gap-3">
50                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-treasury-secondary">
51                    <User className="h-5 w-5 text-treasury-paper" />
52                  </div>
53                  <div>
54                    <p className="font-bold text-treasury-ink text-sm">
55                      Built by Gregory Johns
56                    </p>
57// … truncated