feat(details): create new keyword disclosure shared component

src/components/KeywordDisclosure/index.tsx

@@ -0,0 +1,66 @@
+import Tag from '@app/components/Common/Tag';
+import { useUser } from '@app/hooks/useUser';
+import { Disclosure, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import type { Keyword } from '@server/models/common';
+import Link from 'next/link';
+
+interface KeywordDisclosureProps {
+  keywords: Keyword[];
+  type: 'tv' | 'movies';
+}
+
+const KeywordDisclosure = ({ keywords, type }: KeywordDisclosureProps) => {
+  const { user } = useUser();
+
+  return (
+    <>
+      {keywords.length > 0 && (
+        <Disclosure defaultOpen={!user?.settings?.collapseTags}>
+          {({ open }) => (
+            <>
+              <Disclosure.Button
+                className={`mt-2 flex w-full items-center justify-between space-x-2 border-gray-700 bg-gray-800 px-4 py-2 text-gray-200 ${
+                  open
+                    ? 'rounded-t-md border-t border-l border-r'
+                    : 'rounded-md border'
+                }`}
+              >
+                <span className="text-lg">Tags</span>
+                <ChevronDownIcon
+                  className={`${
+                    open ? 'rotate-180' : ''
+                  } h-6 w-6 text-gray-500`}
+                />
+              </Disclosure.Button>
+              <Transition
+                show={open}
+                enter="transition-opacity duration-100 ease-out"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="transition-opacity duration-75 ease-out"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Disclosure.Panel className="w-full rounded-b-md border-b border-l border-r border-gray-700 px-4 py-4">
+                  {keywords.map((keyword) => (
+                    <Link
+                      href={`/discover/${type}?keywords=${keyword.id}`}
+                      key={`keyword-id-${keyword.id}`}
+                    >
+                      <a className="mr-2 inline-flex last:mr-0">
+                        <Tag>{keyword.name}</Tag>
+                      </a>
+                    </Link>
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            </>
+          )}
+        </Disclosure>
+      )}
+    </>
+  );
+};
+
+export default KeywordDisclosure;

src/components/MovieDetails/index.tsx

@@ -10,10 +10,10 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import type { PlayButtonLink } from '@app/components/Common/PlayButton';
 import PlayButton from '@app/components/Common/PlayButton';
-import Tag from '@app/components/Common/Tag';
 import Tooltip from '@app/components/Common/Tooltip';
 import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import IssueModal from '@app/components/IssueModal';
+import KeywordDisclosure from '@app/components/KeywordDisclosure';
 import ManageSlideOver from '@app/components/ManageSlideOver';
 import MediaSlider from '@app/components/MediaSlider';
 import PersonCard from '@app/components/PersonCard';
@@ -28,7 +28,6 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
-import { Disclosure, Transition } from '@headlessui/react';
 import {
   ArrowRightCircleIcon,
   CloudIcon,
@@ -41,7 +40,6 @@ import {
 import {
   ChevronDoubleDownIcon,
   ChevronDoubleUpIcon,
-  ChevronDownIcon,
 } from '@heroicons/react/24/solid';
 import { type RatingResponse } from '@server/api/ratings';
 import { IssueStatus } from '@server/constants/issue';
@@ -466,50 +464,10 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
               </div>
             </>
           )}
-          {data.keywords.length > 0 && (
-            <Disclosure defaultOpen={!user?.settings?.collapseTags}>
-              {({ open }) => (
-                <>
-                  <Disclosure.Button
-                    className={`mt-2 flex w-full items-center justify-between space-x-2 border-gray-700 bg-gray-800 px-4 py-2 text-gray-200 ${
-                      open
-                        ? 'rounded-t-md border-t border-l border-r'
-                        : 'rounded-md border'
-                    }`}
-                  >
-                    <span className="text-lg">Tags</span>
-                    <ChevronDownIcon
-                      className={`${
-                        open ? 'rotate-180' : ''
-                      } h-6 w-6 text-gray-500`}
-                    />
-                  </Disclosure.Button>
-                  <Transition
-                    show={open}
-                    enter="transition-opacity duration-100 ease-out"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="transition-opacity duration-75 ease-out"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Disclosure.Panel className="w-full rounded-b-md border-b border-l border-r border-gray-700 px-4 py-4">
-                      {data.keywords.map((keyword) => (
-                        <Link
-                          href={`/discover/movies?keywords=${keyword.id}`}
-                          key={`keyword-id-${keyword.id}`}
-                        >
-                          <a className="mr-2 inline-flex last:mr-0">
-                            <Tag>{keyword.name}</Tag>
-                          </a>
-                        </Link>
-                      ))}
-                    </Disclosure.Panel>
-                  </Transition>
-                </>
-              )}
-            </Disclosure>
-          )}
+          <KeywordDisclosure
+            keywords={data.keywords}
+            type="movies"
+          ></KeywordDisclosure>
         </div>
         <div className="media-overview-right">
           {data.collection && (

src/components/TvDetails/index.tsx

@@ -11,10 +11,10 @@ import PageTitle from '@app/components/Common/PageTitle';
 import type { PlayButtonLink } from '@app/components/Common/PlayButton';
 import PlayButton from '@app/components/Common/PlayButton';
 import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
-import Tag from '@app/components/Common/Tag';
 import Tooltip from '@app/components/Common/Tooltip';
 import ExternalLinkBlock from '@app/components/ExternalLinkBlock';
 import IssueModal from '@app/components/IssueModal';
+import KeywordDisclosure from '@app/components/KeywordDisclosure';
 import ManageSlideOver from '@app/components/ManageSlideOver';
 import MediaSlider from '@app/components/MediaSlider';
 import PersonCard from '@app/components/PersonCard';
@@ -503,50 +503,10 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
               </div>
             </>
           )}
-          {data.keywords.length > 0 && (
-            <Disclosure defaultOpen={!user?.settings?.collapseTags}>
-              {({ open }) => (
-                <>
-                  <Disclosure.Button
-                    className={`mt-2 flex w-full items-center justify-between space-x-2 border-gray-700 bg-gray-800 px-4 py-2 text-gray-200 ${
-                      open
-                        ? 'rounded-t-md border-t border-l border-r'
-                        : 'rounded-md border'
-                    }`}
-                  >
-                    <span className="text-lg">Tags</span>
-                    <ChevronDownIcon
-                      className={`${
-                        open ? 'rotate-180' : ''
-                      } h-6 w-6 text-gray-500`}
-                    />
-                  </Disclosure.Button>
-                  <Transition
-                    show={open}
-                    enter="transition-opacity duration-100 ease-out"
-                    enterFrom="opacity-0"
-                    enterTo="opacity-100"
-                    leave="transition-opacity duration-75 ease-out"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Disclosure.Panel className="w-full rounded-b-md border-b border-l border-r border-gray-700 px-4 py-4">
-                      {data.keywords.map((keyword) => (
-                        <Link
-                          href={`/discover/tv?keywords=${keyword.id}`}
-                          key={`keyword-id-${keyword.id}`}
-                        >
-                          <a className="mr-2 inline-flex last:mr-0">
-                            <Tag>{keyword.name}</Tag>
-                          </a>
-                        </Link>
-                      ))}
-                    </Disclosure.Panel>
-                  </Transition>
-                </>
-              )}
-            </Disclosure>
-          )}
+          <KeywordDisclosure
+            keywords={data.keywords}
+            type="tv"
+          ></KeywordDisclosure>
           <h2 className="py-4">{intl.formatMessage(messages.seasonstitle)}</h2>
           <div className="flex w-full flex-col space-y-2">
             {data.seasons