3 files changed, 95 insertions, 85 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;
diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx
index f2bca6b8d..a1f1117b0 100644
--- a/docs/src/components/Examples/Codebar.tsx
+++ b/docs/src/components/Examples/Codebar.tsx
@@ -1,43 +1,38 @@
 import type { FunctionalComponent } from 'preact';
 import { h, Fragment } from 'preact';
-import{useState,useRef,useEffect} from 'preact/hooks'
+import { useState, useRef, useEffect } from 'preact/hooks';
 
-export type CodeBar ={
-    content:string
-    command:string
-}
-
-const CodeBar:FunctionalComponent=({content,command})=>{
-    const [clicked,setClicked]=useState(false)
-    const [titleTxt,setTitleTxt] = useState("Copy Command to Clipboard")
-    useEffect(()=>{
-        const timeout = setTimeout(()=>{
-            setClicked(false)
-            setTitleTxt("Copy Command to Clipboard")
-        },1500)
-        return ()=> clearTimeout(timeout)
-    },[clicked])
-    /**
-     * 
-     */
-    function onClick(e){
-        setClicked(true)
-        setTitleTxt("Copied to Clipboard!")
-        const titleAttr= e.target
-        const clipboard = navigator.clipboard
-        return clipboard.writeText(`${command}`)
-    }
-
-    return(
-        <div style="cursor:pointer;" onClick={onClick} title={titleTxt} > 
-            <code >
-                {content}
-            </code>
-        </div>
-    )
-}
-
-export default CodeBar
+export type CodeBar = {
+  content: string;
+  command: string;
+};
 
+const CodeBar: FunctionalComponent = ({ content, command }) => {
+  const [clicked, setClicked] = useState(false);
+  const [titleTxt, setTitleTxt] = useState('Copy Command to Clipboard');
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setClicked(false);
+      setTitleTxt('Copy Command to Clipboard');
+    }, 1500);
+    return () => clearTimeout(timeout);
+  }, [clicked]);
+  /**
+   *
+   */
+  function onClick(e) {
+    setClicked(true);
+    setTitleTxt('Copied to Clipboard!');
+    const titleAttr = e.target;
+    const clipboard = navigator.clipboard;
+    return clipboard.writeText(`${command}`);
+  }
 
+  return (
+    <div style="cursor:pointer;" onClick={onClick} title={titleTxt}>
+      <code>{content}</code>
+    </div>
+  );
+};
 
+export default CodeBar;
diff --git a/docs/src/components/Examples/card.scss b/docs/src/components/Examples/card.scss
index 8debf2dd5..0211ea099 100644
--- a/docs/src/components/Examples/card.scss
+++ b/docs/src/components/Examples/card.scss
@@ -6,7 +6,7 @@
   background: var(--theme-card-bg);
   box-shadow: var(--theme-card-box-shadow);
   transition: all 0.25s cubic-bezier(0, 0, 0.75, 0.24);
-  &:hover{
+  &:hover {
     transform: translateY(-0.25rem);
   }
 }
@@ -70,7 +70,7 @@
 //     0px 8px 0px 0px var(--theme-divider);
 //     border-radius: 60px 60px 100px 100px / 60px 60px 20px 20px;
 //     width: 100%;
-    
+
 // }
 //     .space-image {
 //     width: 100%;
@@ -119,14 +119,14 @@
   margin: 0;
   border-radius: 50%;
 }
-.heroImg{
+.heroImg {
   display: block;
   --hero-radius: 50px 50px 100px 100px / 60px 60px 20px 20px;
   border-radius: var(--hero-radius);
   width: 100%;
-  height:15rem;
+  height: 15rem;
   box-shadow: inset 5px -2px 7px 0px rgb(185 188 231 / 37%),
-        0px 8px 0px 0px var(--theme-divider);
+    0px 8px 0px 0px var(--theme-divider);
   border-radius: var(--hero-radius);
   object-fit: cover;
 }
@@ -152,7 +152,7 @@
 }
 
 .tooltip .tooltip-text::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 100%;
   left: 50%;
@@ -164,4 +164,4 @@
 
 .tooltip:hover .tooltip-text {
   visibility: visible;
-}
-\ No newline at end of file
+}