generated from Fascinated/nextjs-13-template-with-tailwindcss
Add Discord status #5
@ -33,6 +33,10 @@ Simple Links is a lightweight alternative to Linktree and others.
|
||||
|
||||
Just simply remove it from the config and it will not show anymore
|
||||
|
||||
## Showing Discord status
|
||||
|
||||
You must be in the [lanyard server](https://discord.gg/UrXF2cfJ7F) for it to work.
|
||||
|
||||
## Help!!! I'm getting an error when launching it
|
||||
|
||||
### Config Issue
|
||||
@ -74,6 +78,11 @@ simple-links | Type error: Property 'theme' does not exist on type '{ name: stri
|
||||
"options": {
|
||||
"showSourceLink": true // Should we show the "Source Code" link
|
||||
},
|
||||
// Show your discord status on the site (You MUST be in the Lanyard server)
|
||||
// https://discord.gg/UrXF2cfJ7F
|
||||
"discord": {
|
||||
"id": "474221560031608833" // Your discord ID
|
||||
},
|
||||
// Search engine and embedding metadata (discord, twitter, etc embeds)
|
||||
"metadata": {
|
||||
"title": "Your Name", // The title of the embed
|
||||
|
@ -16,6 +16,9 @@
|
||||
"infoCard": {
|
||||
"transparency": 0.85
|
||||
},
|
||||
"discord": {
|
||||
"id": "474221560031608833"
|
||||
},
|
||||
"options": {
|
||||
"showSourceLink": true
|
||||
},
|
||||
|
9321
package-lock.json
generated
9321
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -14,19 +14,20 @@
|
||||
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@types/node": "20.3.3",
|
||||
"@types/node": "20.4.1",
|
||||
"@types/react": "18.2.14",
|
||||
"@types/react-dom": "18.2.6",
|
||||
"autoprefixer": "10.4.14",
|
||||
"eslint": "8.44.0",
|
||||
"eslint-config-next": "13.4.7",
|
||||
"next": "13.4.7",
|
||||
"next-plausible": "^3.8.0",
|
||||
"postcss": "8.4.24",
|
||||
"eslint-config-next": "13.4.9",
|
||||
"next": "13.4.9",
|
||||
"next-plausible": "^3.9.1",
|
||||
"postcss": "8.4.25",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"sharp": "^0.32.1",
|
||||
"sharp": "^0.32.2",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "5.1.6"
|
||||
"typescript": "5.1.6",
|
||||
"use-lanyard": "^1.4.4"
|
||||
}
|
||||
}
|
||||
|
42
src/app/components/Avatar.tsx
Normal file
42
src/app/components/Avatar.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useLanyardWS } from "use-lanyard";
|
||||
|
||||
import Config from "../../../config.json";
|
||||
|
||||
export default function Avatar(props: any) {
|
||||
const { avatar } = props;
|
||||
|
||||
const discordId: any = Config.discord.id;
|
||||
const lanyardData = useLanyardWS(discordId);
|
||||
const hasLanyard = lanyardData != undefined;
|
||||
|
||||
const statusColor = {
|
||||
online: "bg-green-400",
|
||||
offline: "bg-slate-400",
|
||||
dnd: "bg-red-500",
|
||||
idle: "bg-orange-400",
|
||||
};
|
||||
const currentStatus =
|
||||
lanyardData != undefined
|
||||
? statusColor[lanyardData.discord_status]
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="relative inline-block">
|
||||
<Image
|
||||
src={avatar}
|
||||
alt="Avatar"
|
||||
width={120}
|
||||
height={120}
|
||||
className="rounded-full"
|
||||
/>
|
||||
{hasLanyard && (
|
||||
<div
|
||||
className={`absolute bottom-2 right-2 w-4 h-4 rounded-full transition ${currentStatus}`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@ -5,6 +5,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import Image from "next/image";
|
||||
import Config from "../../config.json";
|
||||
import Avatar from "./components/Avatar";
|
||||
|
||||
library.add(fab, far, fas); // Loading in the icons from FontAwesome
|
||||
|
||||
@ -77,13 +78,7 @@ export default function Home() {
|
||||
>
|
||||
<div className="m-5">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<Image
|
||||
src={avatar}
|
||||
alt="Avatar"
|
||||
width={120}
|
||||
height={120}
|
||||
className="rounded-full"
|
||||
/>
|
||||
<Avatar avatar={avatar} />
|
||||
<div className="mb-3"></div>
|
||||
<h1 className="text-4xl font-bold">{name}</h1>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user