Merge pull request #86 from the-collab-lab/kd-create-emoji-component

[KD] Refactor Emoji component from About page

src/components/Emoji.jsx

@@ -0,0 +1,7 @@
+export function Emoji({ children, label }) {
+ return (
+ <span role="img" aria-label={label}>
+ {children}
+ </span>
+ );
+}

src/components/index.js

@@ -3,3 +3,4 @@ export * from './SingleList';
 export * from './Dialog';
 export * from './AddItem';
 export * from './SortedItemsMap';
+export * from './Emoji';

src/views/About.jsx

@@ -1,14 +1,7 @@
+import { Emoji } from '../components';
 import './About.css';
 
 export function About() {
- function Emoji({ children, label }) {
- return (
- <span role="img" aria-label={label}>
- {children}
- </span>
- );
- }
-
  return (
  <>
  <main className="About-main">

src/views/Layout.jsx

@@ -1,6 +1,6 @@
 import { Outlet, NavLink } from 'react-router-dom';
 import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
-
+import { Emoji } from '../components';
 import './Layout.css';
 import { auth } from '../api/config.js';
 
@@ -39,11 +39,8 @@ export function Layout() {
  </main>
  <footer className="Layout-footer">
  <p className="Layout-footer-attribution">
- Crafted with care{' '}
- <span role="img" aria-label="purple-heart">
- 💜{' '}
- </span>
- by{' '}
+ Crafted with care <Emoji label="purple-heart">💜</Emoji>
+ {' '}by{' '}
  <a
  className="Layout-footer-link"
  href="https://github.com/amalyam"