Refactor: redefine name as an optional type

This is the TypeScript Way

src/components/Card.tsx

@@ -10,7 +10,7 @@ import type { ButtonClickHandler } from "../clickHandler";
 
 const Card: React.FC<{
   id: string;
-  name: string;
+  name?: string;
   url: string;
   wordList: string[];
   videoListUrl?: string;

src/components/DynamicCard.tsx

@@ -5,13 +5,8 @@ import flattenWordList from "../lib/flattenWordList";
 import type { KeyedConfig } from "../loaders/configLoaders";
 
 const DynamicCard: React.FC = () => {
-  const {
-    id,
-    name = "",
-    url,
-    wordList,
-    videoListUrl,
-  } = 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

src/layouts/ContentLayout.tsx

@@ -8,7 +8,7 @@ import type { Config } from "../data/config";
 
 const ContentLayout: React.FC = () => {
   const { t } = useTranslation();
-  const { name = "", videoListUrl } = useLoaderData() as Config;
+  const { name, videoListUrl } = useLoaderData() as Config;
 
   const headerContent = (
     <>

src/layouts/MainLayout.tsx

@@ -4,7 +4,7 @@ import Footer from "../components/Footer";
 import LanguagePicker from "../components/LanguagePicker";
 
 const MainLayout: React.FC<{
-  name: string;
+  name?: string;
   headerContent: ReactNode;
   body: ReactNode;
   footerClass?: string;