feat: improved the footer appearance

kurone-kito · Jun 22, 2021 · 8cb128c · 8cb128c
1 parent 1c2c7c6
commit 8cb128c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/dantalion-web-playground/src/components/molecules/Footer.stories.tsx b/packages/dantalion-web-playground/src/components/molecules/Footer.stories.tsx
@@ -11,4 +11,4 @@ const Template: Story<Props> = ({ author, children }) => (
 );
 
 export const Default = Template.bind({});
-Default.args = { author: 'Author', children: 'Children' };
+Default.args = { author: 'Author', children: ['Children'] };
diff --git a/packages/dantalion-web-playground/src/components/molecules/Footer.tsx b/packages/dantalion-web-playground/src/components/molecules/Footer.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode, VFC } from 'react';
+import { Children, ReactNode, ReactNodeArray, VFC } from 'react';
 import Logo from '../atoms/Logo';
 import FooterNavigation from './FooterNavigation';
 
@@ -7,7 +7,7 @@ export interface Props {
   /** Specifies the author name. */
   readonly author?: ReactNode;
   /** The children items. */
-  readonly children?: ReactNode;
+  readonly children?: ReactNodeArray;
 }
 
 /** The footer component */
@@ -23,7 +23,14 @@ const Component: VFC<Props> = ({ author, children }) => (
       <div className="flex flex-grow items-center justify-center">
         <FooterNavigation author={author} />
       </div>
-      <div className="flex-shrink p-4">{children}</div>
+      <div className="flex flex-col flex-shrink p-4 lg:flex-row">
+        {Children.toArray(children).map((child, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <div className="flex-shrink p-4" key={index}>
+            {child}
+          </div>
+        ))}
+      </div>
     </nav>
   </footer>
 );

diff --git a/packages/dantalion-web-playground/src/components/molecules/FooterNavigation.tsx b/packages/dantalion-web-playground/src/components/molecules/FooterNavigation.tsx
@@ -20,8 +20,11 @@ const Component: VFC<Props> = ({ author }) => (
   <List
     className="divide-x-2 divide-gray-500 divide-opacity-50 flex flex-row justify-center p-4"
     itemType={({ className, ...props }) => (
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      <li className={classNames('px-3', className)} {...props} />
+      <li
+        className={classNames('place-self-center px-3', className)}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+      />
     )}
   >
     <>&copy; {author}</>