feat: add license information to song page

Author: Bentroen

shared/validation/song/constants.ts

@@ -89,8 +89,16 @@ export const UploadConst = deepFreeze({
   },
 
   licenses: {
-    cc_by_sa: 'Creative Commons - Attribution-ShareAlike 4.0',
-    standard: 'Standard License',
+    cc_by_sa: {
+      name: 'Creative Commons - Attribution-ShareAlike 4.0',
+      description:
+        'You can copy, modify, and distribute this song, even for commercial purposes, as long as you credit the author and provide a link to the song. If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.\n\nFor more information, please visit the [Creative Commons website](https://creativecommons.org/licenses/by-sa/4.0/).',
+    },
+    standard: {
+      name: 'Standard License',
+      description:
+        "The author reserves all rights. You may not use this song without the author's permission.",
+    },
   },
 
   visibility: {

web/src/modules/song/components/SongPage.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image';
 
 import axios from '@web/src/lib/axios';
 
+import { LicenseInfo } from './client/LicenseInfo';
 import { SongDetails } from './SongDetails';
 import {
   DownloadSongButton,
@@ -62,6 +63,7 @@ export async function SongPage({ id }: { id: string }) {
           <p className='leading-tight whitespace-pre-line'>
             {song.description}
           </p>
+          <LicenseInfo license={song.license} />
         </div>
       </div>
 

web/src/modules/song/components/client/LicenseInfo.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { UploadConst } from '@shared/validation/song/constants';
+import Markdown from 'react-markdown';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@web/src/modules/shared/components/tooltip';
+
+export const LicenseTooltip = ({ description }: { description: string }) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button type='button' className='text-zinc-500 cursor-default'>
+          <FontAwesomeIcon icon={faQuestionCircle} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent className='max-w-64 px-2.5 py-2 flex flex-col gap-2 [&_a]:text-blue-400 [&_a:hover]:text-blue-300'>
+        {<Markdown>{description}</Markdown>}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export const LicenseInfo = ({ license }: { license: string }) => {
+  // @ts-expect-error - read-only object cannot be indexed with a string
+  const licenseInfo = UploadConst.licenses[license];
+
+  if (!licenseInfo) {
+    return null;
+  }
+
+  return (
+    <div className='flex items-center gap-3'>
+      <p className='text-sm text-zinc-400'>License</p>
+      <p className='text-sm'>{licenseInfo.name}</p>
+      <LicenseTooltip description={licenseInfo.description} />
+    </div>
+  );
+};

web/src/modules/song/components/client/SongForm.tsx

@@ -295,9 +295,10 @@ export const SongForm = ({
                 {...register('license')}
               >
                 {Object.entries(UploadConst.licenses).map(
-                  ([key, value]: [string, string]) => (
+                  // @ts-expect-error - TS doesn't like the destructuring here
+                  ([key, { name }]: [string, string]) => (
                     <Option key={key} value={key}>
-                      {value}
+                      {name}
                     </Option>
                   ),
                 )}