diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 7f23847..3d0dfb2 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -10,10 +10,11 @@ import type { ButtonClickHandler } from "../clickHandler"; const Card: React.FC<{ id: string; - name: string; + name?: string; url: string; wordList: string[]; -}> = ({ id, name, url, wordList }) => { + videoListUrl?: string; +}> = ({ id, name, url, wordList, videoListUrl }) => { const [cellDataList, toggleStamped, setNewWords, clearAllCells] = useCard( id, wordList, @@ -42,7 +43,14 @@ const Card: React.FC<{ ); const body = ; - return ; + return ( + + ); }; export default Card; diff --git a/src/components/DynamicCard.tsx b/src/components/DynamicCard.tsx index b01d1d5..7fb75cd 100644 --- a/src/components/DynamicCard.tsx +++ b/src/components/DynamicCard.tsx @@ -5,13 +5,22 @@ import flattenWordList from "../lib/flattenWordList"; import type { KeyedConfig } from "../loaders/configLoaders"; const DynamicCard: React.FC = () => { - const { id, name = "", url, wordList } = useLoaderData() as KeyedConfig; + const { id, name, url, wordList, videoListUrl } = + useLoaderData() as KeyedConfig; if (wordList.length > 0) { // Card saves the word list to the session, so don't render a card if the // word list hasn't loaded yet const words = flattenWordList(wordList); - return ; + return ( + + ); } }; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index bf0c5a3..f968189 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -5,7 +5,10 @@ import "./Footer.css"; import { Link } from "react-router-dom"; import classNames from "classnames"; -const Footer: React.FC<{ className?: string }> = ({ className }) => { +const Footer: React.FC<{ className?: string; videoListUrl?: string }> = ({ + className, + videoListUrl, +}) => { const { t } = useTranslation(); return ( @@ -14,14 +17,13 @@ const Footer: React.FC<{ className?: string }> = ({ className }) => {
  • {t("footer.wordList")}
  • -
  • - - {t("footer.videoList")} - -
  • + {videoListUrl && ( +
  • + + {t("footer.videoList")} + +
  • + )}
  • { const { t } = useTranslation(); - const { name = "" } = useLoaderData() as Config; + const { name, videoListUrl } = useLoaderData() as Config; const headerContent = ( <> @@ -26,6 +26,7 @@ const ContentLayout: React.FC = () => { headerContent={headerContent} body={body} footerClass="Content-footer" + videoListUrl={videoListUrl} /> ); }; diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx index ee08fe3..7f22514 100644 --- a/src/layouts/MainLayout.tsx +++ b/src/layouts/MainLayout.tsx @@ -4,11 +4,12 @@ import Footer from "../components/Footer"; import LanguagePicker from "../components/LanguagePicker"; const MainLayout: React.FC<{ - name: string; + name?: string; headerContent: ReactNode; body: ReactNode; footerClass?: string; -}> = ({ name, headerContent, body, footerClass }) => { + videoListUrl?: string; +}> = ({ name, headerContent, body, footerClass, videoListUrl }) => { return (
    @@ -30,7 +31,7 @@ const MainLayout: React.FC<{ {body}
    -
    );