{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "http-status-code",
  "title": "HTTP Status Code",
  "description": "component for the HTTP Status Code",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "input",
    "button"
  ],
  "files": [
    {
      "path": "app/registry/statuscode/demostatus.tsx",
      "content": "\"use client\";\n\nimport { useState, type JSX } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  CheckCircle,\n  XCircle,\n  AlertTriangle,\n  Info,\n  ArrowLeft,\n  ArrowRight,\n} from \"lucide-react\";\n\ninterface ResponseMessage {\n  statusCode: number;\n  category: string;\n  description: string;\n}\n\nconst statusCodes: ResponseMessage[] = [\n  { statusCode: 100, category: \"informational\", description: \"Continue\" },\n  {\n    statusCode: 101,\n    category: \"informational\",\n    description: \"Switching Protocols\",\n  },\n  { statusCode: 200, category: \"success\", description: \"OK\" },\n  { statusCode: 201, category: \"success\", description: \"Created\" },\n  { statusCode: 202, category: \"success\", description: \"Accepted\" },\n  { statusCode: 204, category: \"success\", description: \"No Content\" },\n  { statusCode: 300, category: \"redirection\", description: \"Multiple Choices\" },\n  {\n    statusCode: 301,\n    category: \"redirection\",\n    description: \"Moved Permanently\",\n  },\n  { statusCode: 302, category: \"redirection\", description: \"Found\" },\n  { statusCode: 304, category: \"redirection\", description: \"Not Modified\" },\n  { statusCode: 400, category: \"clientError\", description: \"Bad Request\" },\n  { statusCode: 401, category: \"clientError\", description: \"Unauthorized\" },\n  { statusCode: 403, category: \"clientError\", description: \"Forbidden\" },\n  { statusCode: 404, category: \"clientError\", description: \"Not Found\" },\n  {\n    statusCode: 500,\n    category: \"serverError\",\n    description: \"Internal Server Error\",\n  },\n  { statusCode: 501, category: \"serverError\", description: \"Not Implemented\" },\n  { statusCode: 502, category: \"serverError\", description: \"Bad Gateway\" },\n  {\n    statusCode: 503,\n    category: \"serverError\",\n    description: \"Service Unavailable\",\n  },\n  // Add more status codes here...\n];\n\nconst categoryColors = {\n  informational: \"bg-blue-500/10 border border-blue-800 text-blue-300\",\n  success: \"bg-green-500/10 border border-green-800  text-green-300\",\n  redirection: \"bg-yellow-500/10 border border-yellow-800 text-yellow-300\",\n  clientError: \"bg-orange-500/10 border border-orange-800 text-orange-300\",\n  serverError: \"bg-red-500/10 border border-red-800 text-red-300\",\n};\n\nconst categoryIcons: { [key in ResponseMessage[\"category\"]]: JSX.Element } = {\n  informational: <Info className=\"w-5 h-5\" />,\n  success: <CheckCircle className=\"w-5 h-5\" />,\n  redirection: <AlertTriangle className=\"w-5 h-5\" />,\n  clientError: <XCircle className=\"w-5 h-5\" />,\n  serverError: <XCircle className=\"w-5 h-5\" />,\n};\n\nexport default function Ststuscodelist() {\n  const [searchTerm, setSearchTerm] = useState(\"\");\n  const [currentPage, setCurrentPage] = useState(1);\n  const itemsPerPage = 10;\n\n  const filteredCodes = statusCodes.filter(\n    (code) =>\n      code.statusCode.toString().includes(searchTerm) ||\n      code.category.toLowerCase().includes(searchTerm.toLowerCase()) ||\n      code.description.toLowerCase().includes(searchTerm.toLowerCase()),\n  );\n\n  const totalPages = Math.ceil(filteredCodes.length / itemsPerPage);\n  const indexOfLastItem = currentPage * itemsPerPage;\n  const indexOfFirstItem = indexOfLastItem - itemsPerPage;\n  const currentItems = filteredCodes.slice(indexOfFirstItem, indexOfLastItem);\n\n  return (\n    <Card className=\"w-full max-w-4xl mx-auto backdrop-blur-md  border border-white/20 shadow-xl\">\n      <CardContent className=\"p-6\">\n        <Input\n          type=\"text\"\n          placeholder=\"Search status codes...\"\n          value={searchTerm}\n          onChange={(e) => setSearchTerm(e.target.value)}\n          className=\"mb-4\"\n        />\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n          <div className=\"font-semibold\">Status Code</div>\n          <div className=\"font-semibold\">Category</div>\n          <div className=\"font-semibold\">Description</div>\n          {currentItems.map((item) => (\n            <>\n              <div\n                className={`flex items-center justify-center ${\n                  categoryColors[item.category as keyof typeof categoryColors]\n                } rounded-3xl w-28 `}\n              >\n                {item.statusCode}\n              </div>\n              <div className=\"flex items-center capitalize\">\n                {categoryIcons[item.category as keyof typeof categoryIcons]}\n                <span className=\"ml-2\">{item.category}</span>\n              </div>\n              <div>{item.description}</div>\n            </>\n          ))}\n        </div>\n        <div className=\"flex justify-between items-center mt-4\">\n          <Button\n            onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}\n            disabled={currentPage === 1}\n          >\n            <ArrowLeft className=\"w-4 h-4 mr-2\" /> Previous\n          </Button>\n          <span>\n            Page {currentPage} of {totalPages}\n          </span>\n          <Button\n            onClick={() =>\n              setCurrentPage((prev) => Math.min(prev + 1, totalPages))\n            }\n            disabled={currentPage === totalPages}\n          >\n            Next <ArrowRight className=\"w-4 h-4 ml-2\" />\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/http-status-code.tsx"
    }
  ],
  "type": "registry:component"
}