"use client" import { motion } from "framer-motion" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { cn } from "@/lib/utils" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { fadeIn, slideUp, stagger, cardHover, cardHoverTarget, buttonTap, buttonTapTarget, staggerItem } from "@/lib/animations" import { Plus, Megaphone, Users, Globe, Calendar, Send, Eye } from "lucide-react" const announcements = [ { title: "New Dashboard UI Released", audience: "All Users" as const, status: "Published" as const, date: "Jun 12, 2025", views: "12.4K" }, { title: "Scheduled Maintenance Jun 15", audience: "Admins" as const, status: "Scheduled" as const, date: "Jun 10, 2025", views: "—" }, { title: "Feature: Dark Mode Now Available", audience: "All Users" as const, status: "Published" as const, date: "Jun 8, 2025", views: "8.2K" }, { title: "Updated Privacy Policy", audience: "All Users" as const, status: "Published" as const, date: "Jun 5, 2025", views: "24.1K" }, { title: "Team Offsite Notice", audience: "Internal" as const, status: "Draft" as const, date: "Jun 3, 2025", views: "—" }, { title: "Q3 Roadmap Preview", audience: "Premium" as const, status: "Scheduled" as const, date: "May 30, 2025", views: "—" }, ] const audienceSegments = [ { label: "All Users", value: "all", icon: Globe }, { label: "Admins Only", value: "admins", icon: Users }, { label: "Premium", value: "premium", icon: Users }, { label: "Internal", value: "internal", icon: Users }, ] export default function Announcements() { return (

Announcements

Announcements {announcements.map((a) => (

{a.title} {a.status}

{a.audience} {a.date} {a.views !== "—" && {a.views}}

))} Create Announcement

Title

Message

</div>
                <div className="space-y-1.5">
                  <label className="text-xs font-medium text-muted-foreground">Target Audience</label>
                  <Select defaultValue="all">
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Users</SelectItem>
                      <SelectItem value="admins">Admins Only</SelectItem>
                      <SelectItem value="premium">Premium</SelectItem>
                      <SelectItem value="internal">Internal</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex gap-2 pt-2">
                  <Button variant="outline" className="flex-1 gap-2"><Calendar className="size-3" /> Schedule</Button>
                  <Button className="flex-1 gap-2"><Send className="size-3" /> Publish</Button>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </div>
  )
}
</article></body></html>