1
0

Add cool Emoji component

source: https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7
This commit is contained in:
PA4KEV 2023-02-01 22:21:58 +01:00
parent 1729326722
commit 11b004c69e
2 changed files with 18 additions and 1 deletions

16
src/Content/Emoji.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
// source: https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7
const Emoji = props => (
<span
className="emoji"
role="img"
aria-label={props.label ? props.label : ""}
aria-hidden={props.label ? "false" : "true"}
>
{props.symbol}
</span>
);
export default Emoji;

View File

@ -1,4 +1,5 @@
import React from 'react';
import Emoji from '../../Content/Emoji';
const Radio = () => {
return (
@ -13,7 +14,7 @@ const Radio = () => {
<div className="scrollspy-example col-6 offset-3" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabIndex="0">
<section className="content-section">
<div className='content-item'>
<h1 id="list-intro" className="text-primary">Radio amateur</h1>
<h1 id="list-intro" className="text-primary">Radio amateur <Emoji symbol="📻"/></h1>
<p>I am a (beginner) ham radio amateur! My callsign is: <b>PA4KEV</b></p>
<p>This hobby involves experimenting with wireless communication and electronics. Without the magic of radio, we would not have television, wifi or mobile phones.</p>
<p>Here I post my notes on the hobby.</p>