diff options
author | 2021-09-06 08:25:23 +0000 | |
---|---|---|
committer | 2021-09-06 08:25:23 +0000 | |
commit | b4d1c9bc64f14971339a691f5d860e5a952f6e8b (patch) | |
tree | 2a5a1107e9df1bba1442eda3f0c42298273493fc /docs/src/components/Examples/CardLink.tsx | |
parent | 6185f9f7b15908b48f9ae2e1d532634f5b59c9f9 (diff) | |
download | astro-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.tsx | 97 |
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; |