primefaces · tanerengiiin · Feb 6, 2024 · Jan 29, 2024 · Jan 29, 2024 · Jan 29, 2024
diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js
@@ -1,6 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-const TemplateConfiguration = ({ title = '', description = '' }) => {
+const TemplateConfiguration = ({
+    title = "",
+    description = "",
+}) => {
     return (
         <div className="template-configuration-wrapper">
             <div className="template-configuration">
@@ -27,6 +30,6 @@ const TemplateConfiguration = ({ title = '', description = '' }) => {
             </div>
         </div>
     );
-};
+}
 
-export default TemplateConfiguration;
+export default TemplateConfiguration
diff --git a/components/templates/TemplateFeatures.js b/components/templates/TemplateFeatures.js
@@ -1,14 +1,18 @@
-import React from 'react';
-import { ObjectUtils } from '../lib/utils/Utils';
+import React, { useContext } from 'react';
+import AppContentContext from '../layout/appcontentcontext';
 
 const TemplateFeatures = ({ featuresData, displayType }) => {
+    const { darkMode } = useContext(AppContentContext);
+
     const renderHorizontalFeatures = () => {
         return (
             <div className="template-features-horizontal-wrapper">
                 <div className="template-features-horizontal">
                     {featuresData.map((data, i) => (
                         <div key={i} className="template-features-horizontal-card">
-                            <div className="template-features-horizontal-card-top">{ObjectUtils.getJSXElement(data.template) || <img src={data.src} alt={data.title} />}</div>
+                            <div className="template-features-horizontal-card-top">
+                                <img src={darkMode ? (data.darkSrc || data.src) : data.src} alt={data.title}></img>
+                            </div>
                             <div className="template-features-horizontal-card-bottom">
                                 <h5 className="template-features-horizontal-card-bottom-title">{data.title}</h5>
                                 <p className="template-features-horizontal-card-bottom-description">{data.description}</p>
@@ -33,7 +37,9 @@ const TemplateFeatures = ({ featuresData, displayType }) => {
                             <div key={i} className="template-features-vertical-col">
                                 {(i === 0 ? firstColumnData : secondColumnData).map((data, j) => (
                                     <div key={j} className={`template-features-vertical-card `}>
-                                        <div className="template-features-vertical-card-image">{ObjectUtils.getJSXElement(data.template) || <img src={data.src} alt={data.title} />}</div>
+                                        <div className="template-features-vertical-card-image">
+                                            <img src={darkMode ? (data.darkSrc || data.src) : data.src} alt={data.title} />
+                                        </div>
                                         <h2>{data.title}</h2>
                                         <p>{data.description}</p>
                                     </div>

diff --git a/components/templates/TemplateIntro.js b/components/templates/TemplateIntro.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+const TemplateIntro = ({
+    title,
+    description,
+    imageURL
+}) => {
+  return (
+    <div className='template-intro'>
+        <h2>{title}</h2>
+        <p>{description}</p>
+        <div className='template-intro-image'>
+            <img src={imageURL} alt='Template Hero Image'/>
+        </div>
+    </div>
+  )
+}
+
+export default TemplateIntro
diff --git a/components/templates/TemplateLicense.js b/components/templates/TemplateLicense.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+const TemplateLicense = ({ license }) => {
+    return (
+        <div className='template-license-wrapper'>
+            <div className='template-license'>
+                <div className='template-license-cards'>
+                    {license.licenseDetails.map(({ title, price, included }, i) => (
+                        <div key={i} className='template-license-card'>
+                            <span>{title}</span>
+                            <h2>{price}</h2>
+                            <div className='template-license-card-included'>
+                                {included.map((txt, j) => (
+                                    <p key={j}>{txt}</p>
+                                ))}
+                            </div>
+                            <a href='https://www.primefaces.org/layouts/licenses' target='_blank'><button>License Details</button></a>
+                        </div>
+                    ))}
+                </div>
+                <p className='template-license-description'>{license.description}</p>
+                <p className='template-license-visit'>Visit the <a href={license.documentLink} target='_blank'>official documentation</a> for more information.</p>
+            </div>
+        </div>
+    )
+}
+
+export default TemplateLicense
diff --git a/components/templates/TemplateRelated.js b/components/templates/TemplateRelated.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const TemplateRelated = ({ relatedData }) => {
     return (
@@ -7,14 +7,14 @@ const TemplateRelated = ({ relatedData }) => {
                 <h2 className="template-related-title">Related Layouts</h2>
                 <div className="template-related-slide">
                     {relatedData.map((data, i) => (
-                        <a href={data.href} key={i} className="template-related-slide-card">
+                        <a href={data.href} target='_blank' key={i} className="template-related-slide-card">
                             <img src={data.src} alt={'Related Image ' + i} />
                         </a>
                     ))}
                 </div>
             </div>
         </div>
     );
-};
+}
 
-export default TemplateRelated;
+export default TemplateRelated
diff --git a/components/templates/TemplateSeparator.js b/components/templates/TemplateSeparator.js
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from 'react'
 
 const TemplateSeparator = ({ separatorLogo }) => {
     return (
-        <div className="template-seperator">
-            <span className="template-seperator-icon">{separatorLogo}</span>
+        <div className="template-separator">
+            <span className="template-separator-icon">{separatorLogo}</span>
         </div>
     );
-};
+}
 
-export default TemplateSeparator;
+export default TemplateSeparator
diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Dialog } from '../lib/primereact.all';
+import React, { useState } from 'react'
+import { Dialog } from '../lib/primereact.all'
 
 const PlayIcon = React.memo(() => (
     <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
@@ -61,4 +61,4 @@ const TemplateYoutube = ({
     );
 };
 
-export default TemplateYoutube;
+export default TemplateYoutube
diff --git a/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js
@@ -1,29 +1,39 @@
-import React, { useRef } from 'react';
+import React, { useRef } from 'react'
 import useAnimatedFeatures from './useAnimatedFeatures';
 
-const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentID, inlineSeconds = 1000 }) => {
-    const animationInlineRef = useRef(null);
-    const { selectedID, handleClick } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, inlineSeconds);
+const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentHandleHover, parentID, inlineSeconds = 1000 }) => {
+    const animationInlineRef = useRef(null)
+    const { selectedID, setHoveredID, handleClick, handleHover } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, inlineSeconds);
 
     const handleBtnClick = (id) => {
-        handleClick(id);
-        parentHandleClick(parentID);
-    };
+        handleClick(id)
+        parentHandleClick(parentID)
+    }
+
+    const enterCardArea = (id) => {
+        setHoveredID(id);
+        handleHover(id, 'onMouseEnter');
+        parentHandleHover(parentID, 'onMouseEnter');
+    }
+
+    const leaveCardArea = (id) => {
+        setHoveredID(null);
+        handleHover(id, 'onMouseLeave');
+        parentHandleHover(parentID, 'onMouseLeave');
+    }
 
     return (
-        <div className="template-features-animation-right-inline" ref={animationInlineRef}>
-            <div className="template-features-animation-right-inline-tabs">
+        <div className='template-features-animation-right-inline' ref={animationInlineRef}>
+            <div className='template-features-animation-right-inline-tabs'>
                 {inlineFeaturesData.map((data, i) => (
-                    <button className={`${!!(data.id === selectedID) && 'template-features-animation-right-inline-tabs-btnActive'}`} onClick={() => handleBtnClick(data.id)} key={i}>
-                        {data.title}
-                    </button>
+                    <button onMouseEnter={() => enterCardArea(data.id)} onMouseLeave={() => leaveCardArea(data.id)} className={`${!!(data.id === selectedID) && "template-features-animation-right-inline-tabs-btnActive"}`} onClick={() => handleBtnClick(data.id)} key={i}>{data.title}</button>
                 ))}
             </div>
-            <div className="template-features-animation-right-inline-image">
-                <img src={inlineFeaturesData[selectedID - 1].src} alt="Animation Inline Feature Image" />
+            <div className='template-features-animation-right-inline-image'>
+                <img src={inlineFeaturesData[selectedID - 1].src} alt='Animation Inline Feature Image' />
             </div>
         </div>
-    );
-};
+    )
+}
 
-export default TemplateFeaturesAnimationInline;
+export default TemplateFeaturesAnimationInline
diff --git a/components/templates/templateFeaturesAnimation/index.js b/components/templates/templateFeaturesAnimation/index.js
@@ -1,10 +1,20 @@
-import React, { useRef } from 'react';
+import React, { useRef } from 'react'
 import useAnimatedFeatures from './useAnimatedFeatures';
 import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline';
 
 const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 5000 }) => {
     const animationRef = useRef(null);
-    const { selectedID, handleClick } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds);
+    const { selectedID, setHoveredID , handleClick,handleHover } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds);
+
+    const enterCardArea = (id) => {
+        setHoveredID(id)
+        handleHover(id, 'onMouseEnter');
+    }
+
+    const leaveCardArea = (id) => {
+        setHoveredID(null)
+        handleHover(id, 'onMouseLeave');
+    }
 
     return (
         <div className="template-features-animation-wrapper">
@@ -15,7 +25,7 @@ const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 500
                         const orderNumber = (i + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
 
                         return (
-                            <div key={i} className={`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`} onClick={() => handleClick(data.id)}>
+                            <div key={i} onMouseEnter={() => enterCardArea(data.id)} onMouseLeave={() => leaveCardArea(data.id)} className={`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`} onClick={() => handleClick(data.id)}>
                                 <div className="template-features-animation-left-card-order">
                                     <div>{orderNumber}</div>
                                     <div>{orderNumber}</div>
@@ -34,6 +44,7 @@ const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 500
                         <TemplateFeaturesAnimationInline
                             inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData}
                             parentHandleClick={handleClick}
+                            parentHandleHover={handleHover}
                             parentID={selectedID}
                             inlineSeconds={animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length}
                         />
@@ -44,6 +55,6 @@ const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 500
             </div>
         </div>
     );
-};
+}
 
-export default TemplateFeaturesAnimation;
+export default TemplateFeaturesAnimation
diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
@@ -1,45 +1,61 @@
 // useAnimatedFeatures.js
-import { useEffect, useState } from 'react';
-import useVisible from './useVisible';
+import React, { useEffect, useState } from "react";
+import useVisible from "./useVisible";
 
-const useAnimatedFeatures = (animationRef, arrayLength, seconds = 5000) => {
+const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => {
     const [selectedID, setSelectedID] = useState(1);
     const [intervalIds, setIntervalIds] = useState([]);
+    const [cancelInterval, setCancelInterval] = useState(false);
+    const [hoveredID, setHoveredID] = useState(null);
     const isVisible = useVisible(animationRef);
 
     const clearAllIntervals = () => {
         if (intervalIds.length <= 0) return;
-        intervalIds.forEach((intervalId) => window.clearInterval(intervalId));
+        intervalIds.forEach(intervalId => window.clearInterval(intervalId));
         setIntervalIds([]);
     };
 
     const createInterval = () => {
         const interval = setInterval(() => {
-            setSelectedID((prev) => (prev === arrayLength ? 1 : prev + 1));
+            setSelectedID(prev => (prev === arrayLength ? 1 : prev + 1));
         }, seconds);
 
-        setIntervalIds((prev) => [...prev, interval]);
-    };
+        setIntervalIds(prev => [...prev, interval]);
+    }
 
-    const handleClick = (cardId) => {
+    const handleClick = cardId => {
         clearAllIntervals();
         setSelectedID(cardId);
-        createInterval();
+        setCancelInterval(true)
+    };
+
+    const handleHover = (cardId, type) => {
+        if (cancelInterval || cardId !== selectedID) return;
+        clearAllIntervals();
+
+        if (type === "onMouseLeave") {
+            setSelectedID(cardId);
+            createInterval()
+        }
     };
 
     useEffect(() => {
         clearAllIntervals();
 
         if (isVisible) {
-            createInterval();
+            createInterval()
         } else {
             clearAllIntervals();
-            setSelectedID(1);
+            setSelectedID(1)
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isVisible]);
+    }, [animationRef, isVisible]);
+
+    useEffect(() => {
+        if (!hoveredID) null;
+        handleHover(hoveredID, "onMouseEnter");
+    }, [selectedID])
 
-    return { selectedID, handleClick };
+    return { selectedID, setHoveredID, handleClick, handleHover };
 };
 
 export default useAnimatedFeatures;
diff --git a/components/templates/templateFeaturesAnimation/useVisible.js b/components/templates/templateFeaturesAnimation/useVisible.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const useVisible = (element, rootMargin = 0.2) => {
     const [isVisible, setIsVisible] = useState(false);
@@ -8,7 +8,7 @@ const useVisible = (element, rootMargin = 0.2) => {
             ([entry]) => {
                 setIsVisible(entry.isIntersecting);
             },
-            { threshold: rootMargin }
+            { threshold: rootMargin },
         );
 
         if (element.current) {
@@ -17,13 +17,13 @@ const useVisible = (element, rootMargin = 0.2) => {
 
         return () => {
             if (observer && element.current) {
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-                observer.unobserve(element.current);
+                observer.unobserve(element.current)
             }
-        };
-    });
+        }
+
+    }, []);
 
     return isVisible;
 };
 
-export default useVisible;
+export default useVisible;