add explicit / clean indicators for album and song titles (#1634)

src/shared/components/explicit-indicator/explicit-indicator.module.css

@@ -0,0 +1,41 @@
+.root {
+    font-family:
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', Twemoji,
+        sans-serif;
+}
+
+.size-xs {
+    font-size: var(--theme-font-size-xs);
+}
+
+.size-sm {
+    font-size: var(--theme-font-size-sm);
+}
+
+.size-md {
+    font-size: var(--theme-font-size-md);
+}
+
+.size-lg {
+    font-size: var(--theme-font-size-lg);
+}
+
+.size-xl {
+    font-size: var(--theme-font-size-xl);
+}
+
+.size-2xl {
+    font-size: var(--theme-font-size-2xl);
+}
+
+.size-3xl {
+    font-size: var(--theme-font-size-3xl);
+}
+
+.size-4xl {
+    font-size: var(--theme-font-size-4xl);
+}
+
+.muted {
+    opacity: 0.85;
+}

src/shared/components/explicit-indicator/explicit-indicator.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import { ComponentPropsWithoutRef } from 'react';
+
+import styles from './explicit-indicator.module.css';
+
+import { ExplicitStatus } from '/@/shared/types/domain-types';
+
+const EXPLICIT_SYMBOL = '🅴';
+const CLEAN_SYMBOL = '🅲';
+
+export interface ExplicitIndicatorProps extends ComponentPropsWithoutRef<'span'> {
+    explicitStatus: ExplicitStatus | null | undefined;
+    size?: ExplicitIndicatorSize;
+    withSpace?: boolean;
+}
+
+export type ExplicitIndicatorSize = '2xl' | '3xl' | '4xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
+
+export const ExplicitIndicator = ({
+    className,
+    explicitStatus,
+    size = 'lg',
+    withSpace = true,
+    ...rest
+}: ExplicitIndicatorProps) => {
+    if (explicitStatus !== ExplicitStatus.EXPLICIT && explicitStatus !== ExplicitStatus.CLEAN) {
+        return null;
+    }
+
+    const symbol = explicitStatus === ExplicitStatus.EXPLICIT ? EXPLICIT_SYMBOL : CLEAN_SYMBOL;
+
+    return (
+        <span
+            aria-label={explicitStatus === ExplicitStatus.EXPLICIT ? 'Explicit' : 'Clean'}
+            className={clsx(styles.root, styles[`size-${size}`], className)}
+            {...rest}
+        >
+            {withSpace ? `${symbol} ` : symbol}
+        </span>
+    );
+};