{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-sessions-01",
  "type": "registry:block",
  "description": "Active sessions and devices management",
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-sessions-01/page.tsx",
      "content": "\"use client\"\n\nimport {\n  Clock,\n  Computer,\n  Globe,\n  ShieldCheck,\n  Smartphone,\n  X,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nconst ACTIVE_SESSIONS = [\n  {\n    id: 1,\n    type: \"Laptop\",\n    icon: Computer,\n    location: \"New York, USA\",\n    coordinates: \"40.7128° N, 74.0060° W\",\n    isCurrent: true,\n    lastActive: \"2 hours ago\",\n    browser: \"Chrome 114.0\",\n    os: \"macOS 13.4\",\n  },\n  {\n    id: 2,\n    type: \"Smartphone\",\n    icon: Smartphone,\n    location: \"Florida, USA\",\n    coordinates: \"27.9944° N, 81.7603° W\",\n    isCurrent: false,\n    lastActive: \"Yesterday at 3:45 PM\",\n    browser: \"Safari 16.5\",\n    os: \"iOS 16.5\",\n  },\n  {\n    id: 3,\n    type: \"Desktop\",\n    icon: Computer,\n    location: \"Tokyo, Japan\",\n    coordinates: \"35.6895° N, 139.6917° E\",\n    isCurrent: false,\n    lastActive: \"3 days ago\",\n    browser: \"Firefox 112.0\",\n    os: \"Windows 11\",\n  },\n]\n\nexport default function AccountSessions01() {\n  return (\n    <div className=\"mx-auto max-w-5xl p-6\">\n      <Card className=\"bg-card border p-8\">\n        <div className=\"mb-8 border-b pb-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n              <ShieldCheck className=\"text-primary h-6 w-6\" />\n            </div>\n            <div>\n              <h2 className=\"text-2xl font-semibold tracking-tight\">\n                Active Sessions\n              </h2>\n              <p className=\"text-muted-foreground mt-1 text-sm\">\n                Manage and monitor devices that have access to your account\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"space-y-6\">\n          {ACTIVE_SESSIONS.map((session, index) => {\n            const Icon = session.icon\n            const isLast = index === ACTIVE_SESSIONS.length - 1\n\n            return (\n              <div\n                key={session.id}\n                className={`flex items-center justify-between gap-6 py-4 ${\n                  !isLast ? \"border-border border-b\" : \"\"\n                }`}\n              >\n                <div className=\"flex items-center gap-4\">\n                  <div\n                    className={`bg-muted/50 flex h-12 w-12 items-center justify-center rounded-lg`}\n                  >\n                    <Icon\n                      className={`h-6 w-6 ${session.isCurrent ? \"text-primary\" : \"text-muted-foreground\"}`}\n                    />\n                  </div>\n\n                  <div className=\"space-y-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <h4 className=\"font-semibold\">{session.type} Session</h4>\n                      {session.isCurrent && (\n                        <Badge\n                          variant=\"outline\"\n                          className=\"border-green-500 bg-green-50 text-green-700\"\n                        >\n                          Current Session\n                        </Badge>\n                      )}\n                    </div>\n\n                    <div className=\"text-muted-foreground space-y-1 text-sm\">\n                      <div className=\"flex items-center gap-2\">\n                        <Globe className=\"h-4 w-4\" />\n                        <span>{session.location}</span>\n                      </div>\n                      <div className=\"flex items-center gap-2\">\n                        <Clock className=\"h-4 w-4\" />\n                        <span>Last active: {session.lastActive}</span>\n                      </div>\n                      <div>\n                        {session.browser} on {session.os}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-3\">\n                  {!session.isCurrent && (\n                    <Button variant=\"destructive\" size=\"sm\">\n                      <X className=\"mr-2 h-4 w-4\" />\n                      Remove\n                    </Button>\n                  )}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n\n        <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n          <div className=\"flex items-start gap-3\">\n            <ShieldCheck className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n            <div>\n              <h4 className=\"mb-1 text-sm font-medium\">Security Tip</h4>\n              <p className=\"text-muted-foreground text-sm\">\n                If you notice any suspicious activity, immediately remove the\n                session and change your account password. Enable two-factor\n                authentication for additional security.\n              </p>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-sessions/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "800px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "account"
  ]
}