From d321d8366b597e46ff8e3fc63d17622a9297505c Mon Sep 17 00:00:00 2001
From: aFuzzyBear <drgaud@hotmail.com>
Date: Tue, 10 Aug 2021 01:24:25 +0100
Subject: Adds examples page

---
 docs/src/components/Examples/CardLink.tsx | 51 +++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 docs/src/components/Examples/CardLink.tsx

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

diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
new file mode 100644
index 000000000..f17ee724f
--- /dev/null
+++ b/docs/src/components/Examples/CardLink.tsx
@@ -0,0 +1,51 @@
+import { JSX } from '@babel/types';
+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[]
+}
+
+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`)
+        }
+    
+        
+    }
+    /**
+     * 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>
+    )
+}
+
+export default CardLink
\ No newline at end of file
-- 
cgit v1.2.3

