summaryrefslogtreecommitdiff
path: root/docs/src/components/Examples/CardLink.tsx
diff options
context:
space:
mode:
authorGravatar FredKSchott <FredKSchott@users.noreply.github.com> 2021-09-06 08:25:23 +0000
committerGravatar GitHub Actions <actions@github.com> 2021-09-06 08:25:23 +0000
commitb4d1c9bc64f14971339a691f5d860e5a952f6e8b (patch)
tree2a5a1107e9df1bba1442eda3f0c42298273493fc /docs/src/components/Examples/CardLink.tsx
parent6185f9f7b15908b48f9ae2e1d532634f5b59c9f9 (diff)
downloadastro-b4d1c9bc64f14971339a691f5d860e5a952f6e8b.tar.gz
astro-b4d1c9bc64f14971339a691f5d860e5a952f6e8b.tar.zst
astro-b4d1c9bc64f14971339a691f5d860e5a952f6e8b.zip
[ci] yarn format
Diffstat (limited to 'docs/src/components/Examples/CardLink.tsx')
-rw-r--r--docs/src/components/Examples/CardLink.tsx97
1 files changed, 56 insertions, 41 deletions
diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
index f17ee724f..4c04be8a6 100644
--- a/docs/src/components/Examples/CardLink.tsx
+++ b/docs/src/components/Examples/CardLink.tsx
@@ -3,49 +3,64 @@ import type { Component } from 'preact';
import { h, Fragment } from 'preact';
import { useRef } from 'preact/hooks';
-export type CardLinkProps ={
- href:string
- name:string
- children:JSX | JSX[]
-}
+export type CardLinkProps = {
+ href: string;
+ name: string;
+ children: JSX | JSX[];
+};
-const CardLink:Component<CardLinkProps>=({href,name,children}:CardLinkProps):JSX.Element=>{
- const Card = useRef(null)
- /**
- * Set Title Attribute when Hovering over Card
- * @param e - Mouse Enter Event
- */
- function handleOnMouseEnter(e){
- const cardBody = Card.current.querySelector('.card-body')
- const cardThumb = Card.current.querySelector('.icon-image')
- const cardImg = Card.current.querySelector('.heroImg')
+const CardLink: Component<CardLinkProps> = ({
+ href,
+ name,
+ children,
+}: CardLinkProps): JSX.Element => {
+ const Card = useRef(null);
+ /**
+ * Set Title Attribute when Hovering over Card
+ * @param e - Mouse Enter Event
+ */
+ function handleOnMouseEnter(e) {
+ const cardBody = Card.current.querySelector('.card-body');
+ const cardThumb = Card.current.querySelector('.icon-image');
+ const cardImg = Card.current.querySelector('.heroImg');
- if(e.target === cardBody || e.target === cardThumb || e.target === cardImg ) {
- e.target.setAttribute('title',`Click to find out more about our ${name} template`)
- }
-
-
+ if (
+ e.target === cardBody ||
+ e.target === cardThumb ||
+ e.target === cardImg
+ ) {
+ e.target.setAttribute(
+ 'title',
+ `Click to find out more about our ${name} template`
+ );
}
- /**
- * Click Link Card to Page
- * @param e - Click Event
- * @returns new window location
- */
- function handleOnClick(e){
- const card = e.target
- const mainLink = card.querySelector('.main-link')
- const clickableArea = ['.card-body','.icon-image','.heroImg']
- for(let area of clickableArea){
- if(e.currentTarget.classList.contains(area)) {
- return mainLink.click()
- }
- }
+ }
+ /**
+ * Click Link Card to Page
+ * @param e - Click Event
+ * @returns new window location
+ */
+ function handleOnClick(e) {
+ const card = e.target;
+ const mainLink = card.querySelector('.main-link');
+ const clickableArea = ['.card-body', '.icon-image', '.heroImg'];
+ for (let area of clickableArea) {
+ if (e.currentTarget.classList.contains(area)) {
+ return mainLink.click();
+ }
}
- return(
- <div ref={Card} onClick={handleOnClick} onMouseOver={handleOnMouseEnter} aria-label={`Clickable Card taking you directly to the ${name} template`} tabIndex="0">
- {children}
- </div>
- )
-}
+ }
+ return (
+ <div
+ ref={Card}
+ onClick={handleOnClick}
+ onMouseOver={handleOnMouseEnter}
+ aria-label={`Clickable Card taking you directly to the ${name} template`}
+ tabIndex="0"
+ >
+ {children}
+ </div>
+ );
+};
-export default CardLink \ No newline at end of file
+export default CardLink;