Last active
February 17, 2022 15:04
-
-
Save outloudvi/15caee38118efe54a5062091b57afd23 to your computer and use it in GitHub Desktop.
<YTLink YtId="4_wrJAXEMng" YtTime={42} />
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This is needed for any .jsx file | |
// JSX allows you to use HTML tags in JavaScript | |
import React from 'react' | |
// Give a **number**, return mm:ss | |
function formattedYtTime(sec) { | |
// minute | |
const h = Math.floor(sec / 60) | |
// second | |
const s = sec - h * 60 | |
// pad second to 2 digits | |
const ss = String(s).padStart(2, '0') | |
return h + ':' + ss | |
} | |
// A normal way to do it. | |
function YTLink(props) { | |
// Pick the items | |
const YtId = props.YtId | |
const YtTime = Number(props.YtTime) | |
const url = `https://youtube.com/watch?v=${YtId}&t=${YtTime}s` | |
const text = formattedYtTime(YtTime) | |
// Unlike Vue, in React you do NOT use :key=val but key={val} | |
return ( | |
<a href={url} target="_blank" rel="noopener noreferer"> | |
<i className="fa-solid fa-stopwatch" /> {text} | |
</a> | |
) | |
} | |
// ... or you can write "url" and "text" directly in the code. | |
function YTLink_2(props) { | |
const YtId = props.YtId | |
const YtTime = Number(props.YtTime) | |
return ( | |
<a | |
href={`https://youtube.com/watch?v=${YtId}&t=${YtTime}s`} | |
target="_blank" | |
rel="noopener noreferer" | |
> | |
<i className="fa-solid fa-stopwatch" /> {formattedYtTime(YtTime)} | |
</a> | |
) | |
} | |
// ... or you can pick the variable you want directly. | |
// https://es6.ruanyifeng.com/#docs/destructuring#%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC | |
function YTLink_3({ YtId, YtTime }) { | |
return ( | |
<a | |
href={`https://youtube.com/watch?v=${YtId}&t=${YtTime}s`} | |
target="_blank" | |
rel="noopener noreferer" | |
> | |
<i className="fa-solid fa-stopwatch" /> {formattedYtTime(Number(YtTime))} | |
</a> | |
) | |
} | |
// ... or you can use the arrow expression. | |
// Note it's "const YTLink_4", not "function YTLink_4" | |
// https://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0 | |
const YTLink_4 = ({ YtId, YtTime }) => ( | |
<a | |
href={`https://youtube.com/watch?v=${YtId}&t=${YtTime}s`} | |
target="_blank" | |
rel="noopener noreferer" | |
> | |
<i className="fa-solid fa-stopwatch" /> {formattedYtTime(Number(YtTime))} | |
</a> | |
) | |
// Don't forget to export the function you need :D | |
export default YTLink |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment