From b4d1c9bc64f14971339a691f5d860e5a952f6e8b Mon Sep 17 00:00:00 2001
From: FredKSchott <FredKSchott@users.noreply.github.com>
Date: Mon, 6 Sep 2021 08:25:23 +0000
Subject: [ci] yarn format

---
 docs/src/components/Examples/CardLink.tsx | 97 ++++++++++++++++++-------------
 1 file changed, 56 insertions(+), 41 deletions(-)

(limited to 'docs/src/components/Examples/CardLink.tsx')

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;
-- 
cgit v1.2.3