feat: add audio player

src/components/event/textNote/AudioDisplay.tsx

@@ -0,0 +1,42 @@
+import { Component, createSignal, Show } from 'solid-js';
+
+import LazyLoad from '@/components/utils/LazyLoad';
+import SafeLink from '@/components/utils/SafeLink';
+import { useTranslation } from '@/i18n/useTranslation';
+
+type AudioDisplayProps = {
+  url: string;
+  initialHidden: boolean;
+};
+
+const AudioDisplay: Component<AudioDisplayProps> = (props) => {
+  const i18n = useTranslation();
+  const [hidden, setHidden] = createSignal(props.initialHidden);
+
+  return (
+    <Show
+      when={!hidden()}
+      fallback={
+        <button
+          class="rounded bg-bg-tertiary p-3 text-xs text-fg-secondary hover:shadow"
+          onClick={() => setHidden(false)}
+        >
+          {i18n.t('post.showAudio')}
+        </button>
+      }
+    >
+      <LazyLoad fallback={<div class="max-w-full" />}>
+        {() => (
+          <SafeLink class="my-2 block" href={props.url}>
+            {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+            <audio src={props.url} controls>
+              <a href={props.url}>{i18n.t('post.download')}</a>
+            </audio>
+          </SafeLink>
+        )}
+      </LazyLoad>
+    </Show>
+  );
+};
+
+export default AudioDisplay;