- "content": "import { useEffect, useState } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { Button } from \"./button\"\nimport { Card, CardContent, CardHeader } from \"./card\"\nimport Loading from \"./loading\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\"\n\nconst collectionStatsVariants = cva(\n \"inline-flex flex-col rounded-lg border p-4 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default: \"border-gray-200 bg-white text-black hover:bg-gray-50\",\n dark: \"border-gray-700 bg-gray-800 text-white hover:bg-gray-700\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\ninterface CollectionStatsProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof collectionStatsVariants> {\n collectionName: string\n limit?: number\n}\n\nconst CollectionStats = ({\n className,\n variant,\n collectionName,\n ...props\n}: CollectionStatsProps) => {\n const [collections, setCollections] = useState<any>(null)\n\n const [loading, setLoading] = useState(false)\n useEffect(() => {\n setLoading(true)\n const cacheKeyPrefix = `collectionData-${collectionName}`\n const fetchCollectionData = async () => {\n const cachedData = sessionStorage.getItem(cacheKeyPrefix)\n if (cachedData) {\n setCollections(JSON.parse(cachedData))\n } else {\n let url = `https://solanaapi.nftscan.com/api/sol/assets/collection/${collectionName}?show_attribute=false`\n\n try {\n const response = await fetch(url, {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"*/*\",\n \"X-API-KEY\": process.env.NEXT_PUBLIC_NFTSCAN_KEY!,\n },\n })\n const jsonData = await response.json()\n if (jsonData.code === 200) {\n try {\n sessionStorage.setItem(\n cacheKeyPrefix,\n JSON.stringify(jsonData.data)\n )\n } catch (e) {\n clearCollectionCache(cacheKeyPrefix)\n sessionStorage.setItem(\n cacheKeyPrefix,\n JSON.stringify(jsonData.data)\n )\n }\n setCollections(jsonData.data)\n } else {\n console.error(\"Failed to fetch collection data:\", jsonData.message)\n }\n } catch (error) {\n console.error(\"Error fetching collection data:\", error)\n }\n }\n setLoading(false)\n }\n\n fetchCollectionData()\n }, [collectionName])\n\n const clearCollectionCache = (prefix: string) => {\n for (let i = 0; i < sessionStorage.length; i++) {\n const key = sessionStorage.key(i)\n if (key && key.startsWith(prefix)) {\n sessionStorage.removeItem(key)\n }\n }\n }\n\n return (\n <div>\n {loading ? (\n <Loading />\n ) : (\n <div className=\"grid md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6\">\n {collections?.content?.map((collection: any) => (\n <Card\n key=\"1\"\n className=\"max-w-sm bg-[#242c37] text-white rounded-lg shadow-md dark:bg-[#1a202c]\"\n >\n <CardHeader className=\"flex items-center justify-between p-4 border-b border-gray-600\">\n <Avatar>\n <AvatarImage\n src=\"https://github.com/code100x.png\"\n alt=\"@code100x\"\n />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <Button className=\"bg-green-500 text-xs text-white px-2 py-1 rounded-md\">\n OKAY\n </Button>\n </CardHeader>\n <CardContent className=\"p-4\">\n <h2 className=\"text-lg font-bold\">collection.image</h2>\n <div className=\"grid grid-cols-2 gap-4 mt-4 text-sm\">\n <div>\n <p className=\"font-semibold\">3.84</p>\n <p className=\"text-gray-400\">Lowest</p>\n </div>\n <div>\n <p className=\"font-semibold\">3.38M</p>\n <p className=\"text-gray-400\">Volume</p>\n </div>\n <div>\n <p className=\"font-semibold\">4.2K</p>\n <p className=\"text-gray-400\">Owners</p>\n </div>\n <div>\n <p className=\"font-semibold\">10K</p>\n <p className=\"text-gray-400\">Items</p>\n </div>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n )}\n </div>\n )\n}\nCollectionStats.displayName = \"CollectionStats\"\nexport { CollectionStats, collectionStatsVariants }\n"
0 commit comments