feat: show content rating after tags

src/components/PostDetails.tsx

@@ -23,7 +23,7 @@ export const PostDetails = ({ post }: { post: BooruPost }) => {
 	};
 
 	return (
-		<div className="px-2 break-words text-white col-span-full text-center">
+		<div className="px-2 break-words col-span-full text-center">
 			{post.tags
 				?.map((e) => decode(e))
 				?.map((tag) => (
@@ -47,6 +47,20 @@ export const PostDetails = ({ post }: { post: BooruPost }) => {
 						{tag}
 					</button>
 				))}
+			<button
+				type="button"
+				className={classNames(
+					"text-white text-xs font-semibold p-1 px-3 m-1 rounded-full cursor-default",
+					{
+						"bg-green-500": post.rating === "general",
+						"bg-yellow-500": post.rating === "sensitive",
+						"bg-orange-500": post.rating === "questionable",
+						"bg-red-500": post.rating === "explicit",
+					},
+				)}
+			>
+				{post.rating}
+			</button>
 		</div>
 	);
 };

src/lib/booru/gelbooru.ts

@@ -8,6 +8,7 @@ type GelbooruPost = {
 	file_url: string;
 	preview_url: string;
 	sample_url: string;
+	rating: string;
 };
 
 type GelbooruTag = {
@@ -78,6 +79,7 @@ export class Gelbooru {
 					sampleUrl: p.sample_url || null,
 					height: p.height,
 					width: p.width,
+					rating: p.rating,
 				})) || [],
 			hasNextPage: a.count > a.limit + a.offset,
 		};

src/lib/booru/index.ts

@@ -10,6 +10,7 @@ export type BooruPost = {
 	sampleUrl: string | null;
 	height: number;
 	width: number;
+	rating: string;
 };
 
 export type BooruTag = {