Merge pull request #147 from maxwellward/update-badge-layout

Update badge layout and refactor to individual components
peterhanania · Nov 2, 2024 · 443693b · 443693b
2 parents c8fa547 + b4025c6
commit 443693b
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 604 deletions.
diff --git a/components/Data.tsx b/components/Data.tsx
diff --git a/components/data/account_flags.tsx b/components/data/account_flags.tsx
@@ -0,0 +1,38 @@
+import AccountFlagData from "../json/account_flags.json";
+import Tippy from "@tippyjs/react";
+import Image from "next/image";
+
+type AccountFlagDataType = {
+	[key: string]: Flag;
+};
+
+type Flag = {
+	description: string;
+	icon: string;
+}
+
+type FlagDataProps = {
+	data: string[];
+};
+
+const flagData = AccountFlagData as AccountFlagDataType;
+
+export default function AccountFlags({ data }: FlagDataProps) {
+	return (
+		<div className="flex flex-wrap items-center gap-1.5">
+			{data.map((flagKey: any) => {
+				if (!flagData[flagKey]) return null;
+
+				return (
+					<Tippy
+						key={flagKey}
+						content={flagData[flagKey]?.description}>
+						<div className="opacity-90 hover:opacity-100 relative w-6 h-6 sm:w-8 sm:h-8">
+							<Image src={flagData[flagKey]?.icon} alt={flagData[flagKey]?.description} layout="fill" />
+						</div>
+					</Tippy>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/components/data/badges.tsx b/components/data/badges.tsx
@@ -0,0 +1,39 @@
+import BadgeData from "../json/badges.json";
+import Tippy from "@tippyjs/react";
+import Image from "next/image";
+
+type BadgeDataType = {
+	[key: string]: Badge;
+};
+
+type Badge = {
+	description: string;
+	icon: string;
+}
+
+const badgeData = BadgeData as BadgeDataType;
+
+type BadgesProps = {
+	data: string[];
+};
+
+export default function Badges({ data }: BadgesProps) {
+	return (
+		<div className="flex flex-wrap items-center gap-1">
+			{data.map((badgeKey: any) => {
+				if (!badgeData[badgeKey]) return null;
+
+				return (
+					<Tippy
+						key={badgeKey}
+						content={badgeData[badgeKey]?.description}
+					>
+						<div className="opacity-90 hover:opacity-100 relative w-6 h-6 sm:w-8 sm:h-8">
+							<Image src={badgeData[badgeKey]?.icon} alt={badgeData[badgeKey]?.description} layout="fill" />
+						</div>
+					</Tippy>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/components/json/account_flags.json b/components/json/account_flags.json
@@ -0,0 +1,94 @@
+{
+  "MFA_SMS": {
+    "description": "SMS 2FA enabled",
+    "icon": "https://i.imgur.com/Zlz7T6Y.png"
+  },
+  "PREMIUM_PROMO_DISMISSED": {
+    "description": "Dismissed a Nitro promotion",
+    "icon": "https://i.imgur.com/Tj2cGGD.png"
+  },
+  "TEAM_PSEUDO_USER": {
+    "description": "Account is a Team account",
+    "icon": "https://i.imgur.com/kw7QccA.png"
+  },
+  "INTERNAL_APPLICATION": {
+    "description": "Requested verification and/or partnership for a server before (Internal flag)",
+    "icon": "https://i.imgur.com/ffwvcuP.png"
+  },
+  "SYSTEM": {
+    "description": "Account is a system account",
+    "icon": "https://i.imgur.com/z9OGS47.png"
+  },
+  "HAS_UNREAD_URGENT_MESSAGES": {
+    "description": "Unread messages from Discord",
+    "icon": "https://i.imgur.com/NPRjLwg.png"
+  },
+  "UNDERAGE_DELETED": {
+    "description": "Account was deleted for being underage",
+    "icon": "https://i.imgur.com/WV3IZ4W.png"
+  },
+  "BOT_HTTP_INTERACTIONS": {
+    "description": "Bot is an HTTP interaction",
+    "icon": ""
+  },
+  "SPAMMER": {
+    "description": "Marked as a spammer",
+    "icon": ""
+  },
+  "DISABLE_PREMIUM": {
+    "description": "Nitro features forcefully disabled",
+    "icon": ""
+  },
+  "HIGH_GLOBAL_RATE_LIMIT": {
+    "description": "Account has a high global ratelimit",
+    "icon": "https://i.imgur.com/wQj7zyr.png"
+  },
+  "DELETED": {
+    "description": "Account has been deleted",
+    "icon": "https://i.imgur.com/giYNtZV.png"
+  },
+  "DISABLED_SUSPICIOUS_ACTIVITY": {
+    "description": "Account has been disabled for suspicious activity",
+    "icon": "https://i.imgur.com/SsXJNxU.png"
+  },
+  "SELF_DELETED": {
+    "description": "Account was deleted by the user",
+    "icon": "https://i.imgur.com/giYNtZV.png"
+  },
+  "PREMIUM_DISCRIMINATOR": {
+    "description": "Account has a premium discriminator",
+    "icon": "https://i.imgur.com/YMeEmrS.png"
+  },
+  "USED_DESKTOP_CLIENT": {
+    "description": "Account has used the desktop client",
+    "icon": "https://i.imgur.com/MOCCooL.png"
+  },
+  "USED_WEB_CLIENT": {
+    "description": "Account has used the web client",
+    "icon": "https://i.imgur.com/lCe6zyE.png"
+  },
+  "USED_MOBILE_CLIENT": {
+    "description": "Account has used the mobile client",
+    "icon": "https://i.imgur.com/8bv7waQ.png"
+  },
+  "DISABLED": {
+    "description": "Account is currently temporarily or permanently disabled",
+    "icon": "https://i.imgur.com/zmvS3XU.png"
+  },
+  "VERIFIED_EMAIL": {
+    "description": "Account has a verified email",
+    "icon": "https://i.imgur.com/kBIYVBF.png"
+  },
+  "QUARANTINED": {
+    "description": "Account is quarantined",
+    "icon": ""
+  },
+  "COLLABORATOR": {
+    "description": "Account is a collaborator and has staff permissions",
+    "icon": ""
+  },
+  "RESTRICTED_COLLABORATOR": {
+    "description": "Account is a restricted collaborator and has staff permissions",
+    "icon": ""
+  }
+}
diff --git a/components/json/badges.json b/components/json/badges.json
@@ -0,0 +1,62 @@
+{
+  "DISCORD_EMPLOYEE": {
+    "description": "Discord Employee",
+    "icon": "https://i.imgur.com/6eIBtYR.png"
+  },
+  "DISCORD_PARTNER": {
+    "description": "Discord Partner",
+    "icon": "https://i.imgur.com/hpTiFXi.png"
+  },
+  "HYPESQUAD_EVENTS": {
+    "description": "HypeSquad Events Member",
+    "icon": "https://i.imgur.com/RzA4bXZ.png"
+  },
+  "BUG_HUNTER_LEVEL_1": {
+    "description": "Bug Hunter",
+    "icon": "https://i.imgur.com/2NLZJXk.png"
+  },
+  "HOUSE_BRAVERY": {
+    "description": "HypeSquad Bravery",
+    "icon": "https://i.imgur.com/mwFPsVv.png"
+  },
+  "HOUSE_BRILLIANCE": {
+    "description": "HypeSquad Brilliance",
+    "icon": "https://i.imgur.com/UNpQI3M.png"
+  },
+  "HOUSE_BALANCE": {
+    "description": "HypeSquad Balance",
+    "icon": "https://i.imgur.com/Jw2Xyx6.png"
+  },
+  "EARLY_SUPPORTER": {
+    "description": "Nitro Early Supporter",
+    "icon": "https://i.imgur.com/xUtDJFl.png"
+  },
+  "BUG_HUNTER_LEVEL_2": {
+    "description": "Gold Bug Hunter",
+    "icon": "https://i.imgur.com/iBK3a1Z.png"
+  },
+  "VERIFIED_BOT": {
+    "description": "Verified Bot",
+    "icon": ""
+  },
+  "VERIFIED_BOT_DEVELOPER": {
+    "description": "Early Verified Bot Developer",
+    "icon": "https://i.imgur.com/XieNzv4.png"
+  },
+  "CERTIFIED_MODERATOR": {
+    "description": "Certified Discord Moderator",
+    "icon": "https://i.imgur.com/E9hSIGm.png"
+  },
+  "ACTIVE_DEVELOPER": {
+    "description": "Active Developer",
+    "icon": "https://i.imgur.com/VT6nnlu.png"
+  },
+  "NITRO": {
+    "description": "Nitro",
+    "icon": "https://i.imgur.com/LcyKRvv.png"
+  },
+  "NITRO_UNTIL": {
+    "description": "{p_1} have Nitro till {until}",
+    "icon": "https://i.imgur.com/LcyKRvv.png"
+  }
+}