blob: f17ee724fef7ecb902d782af9fef1b03cac228a0 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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
|
