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}
-
+
);