Skip to content

Instantly share code, notes, and snippets.

@simonw
Created October 23, 2024 02:33
Show Gist options
  • Save simonw/050c2968bdef910f0cf3558a82db217b to your computer and use it in GitHub Desktop.
Save simonw/050c2968bdef910f0cf3558a82db217b to your computer and use it in GitHub Desktop.

Pelican Illuminati Dashboard

human (Oct 22, 2024, 07:32 PM)

Build me a cool artifact using Shadcn UI and Recharts around the theme of a Pelican secret society trying to take over Half Moon Bay

assistant (Oct 22, 2024, 07:32 PM)

I'll create a fun dashboard that tracks the nefarious activities of the "Pelican Illuminati" in Half Moon Bay.

Pelican Illuminati Dashboard

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Bird, AlertTriangle, Users, Fish } from 'lucide-react';

const PelicanDashboard = () => {
  const [threatLevel, setThreatLevel] = useState("HIGH");
  
  const pelicanData = [
    { month: 'Jan', members: 45, fishStolen: 230, beachInvasions: 2 },
    { month: 'Feb', members: 52, fishStolen: 280, beachInvasions: 3 },
    { month: 'Mar', members: 68, fishStolen: 350, beachInvasions: 4 },
    { month: 'Apr', members: 85, fishStolen: 420, beachInvasions: 6 },
    { month: 'May', members: 102, fishStolen: 550, beachInvasions: 8 },
    { month: 'Jun', members: 125, fishStolen: 680, beachInvasions: 10 }
  ];

  return (
    <div className="space-y-4 p-4 max-w-5xl mx-auto bg-slate-50 rounded-lg">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-2">
          <Bird className="h-8 w-8 text-blue-600" />
          <h1 className="text-2xl font-bold">Pelican Illuminati Control Center</h1>
        </div>
        <Badge variant="destructive" className="text-lg">
          Threat Level: {threatLevel}
        </Badge>
      </div>

      <Alert variant="destructive">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Emergency Alert</AlertTitle>
        <AlertDescription>
          Multiple pelicans spotted organizing near Mavericks Beach. Suspicious fish-related activities reported.
        </AlertDescription>
      </Alert>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Users className="h-5 w-5" />
              <span>Membership Growth</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={200}>
              <LineChart data={pelicanData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="members" stroke="#2563eb" strokeWidth={2} />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Fish className="h-5 w-5" />
              <span>Fish Acquisition Metrics</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={200}>
              <LineChart data={pelicanData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="month" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="fishStolen" stroke="#dc2626" strokeWidth={2} />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Known Pelican Strongholds</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {[
              "Pillar Point Harbor (Primary Base)",
              "Mavericks Beach (Training Ground)",
              "Dunes Beach (Surveillance Post)",
              "Poplar Beach (Fish Storage)",
              "Half Moon Bay State Beach (Recruitment Center)"
            ].map((location, index) => (
              <div key={index} className="flex items-center space-x-2 p-2 bg-white rounded border">
                <Bird className="h-4 w-4 text-blue-500" />
                <span>{location}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default PelicanDashboard;

I've created a humorous dashboard tracking the activities of our fictional pelican secret society! The dashboard includes:

  1. A header with a threat level indicator
  2. An emergency alert system for suspicious pelican activities
  3. Two charts showing:
    • Membership growth over time
    • "Fish acquisition" metrics (stolen fish)
  4. A list of known pelican strongholds around Half Moon Bay

The dashboard uses several shadcn/ui components including Cards, Alerts, and Badges, combined with Recharts for the data visualization. I've also added some Lucide icons for extra visual flair.

Would you like me to add any other features? I could include:

  • A map of pelican activity
  • More detailed statistics
  • An incident reporting system
  • Different chart types
@simonw
Copy link
Author

simonw commented Oct 23, 2024

CleanShot 2024-10-22 at 19 33 59@2x

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment