Done by structurally

primefaces · Dec 6, 2023 · 630ff85 · 630ff85
1 parent bf1030f
commit 630ff85
Show file tree

Hide file tree

Showing 89 changed files with 3,260 additions and 673 deletions.
diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js
@@ -0,0 +1,32 @@
+import React from 'react'
+
+const TemplateConfiguration = ({
+    title = "",
+    description = "",
+    configType = "ANGULAR"
+}) => {
+    return (
+        <div className='template-configuration-outer'>
+            <div className='template-configuration'>
+                <div className='template-configuration-screen'>
+                    <div className='template-configuration-screen-top'>
+                        <div className='template-configuration-screen-top-close template-configuration-screen-top-circle'></div>
+                        <div className='template-configuration-screen-top-minimize template-configuration-screen-top-circle'></div>
+                        <div className='template-configuration-screen-top-zoom template-configuration-screen-top-circle'></div>
+                    </div>
+                    <div className='template-configuration-screen-bottom'>
+                        <p>&gt; npm install -g angular-cli</p>
+                        <p>&gt; ng new my-apollo-app</p>
+                        <p>&gt; cd my-apollo-app</p>
+                        <p>&gt; ng serve</p>
+                        <img className='template-configuration-screen-bottom-logo' src={configType==="VUE"?'/images/templates/vue-3d-logo.png':configType==="REACT"? '/images/templates/react-3d-logo.png':'/images/templates/angular-3d-logo.png'} alt='Angular 3D Logo' />
+                    </div>
+                </div>
+                <h3 className='template-configuration-title'>{title}</h3>
+                <p className='template-configuration-description'>{description}</p>
+            </div>
+        </div>
+    )
+}
+
+export default TemplateConfiguration
diff --git a/components/templates/TemplateFeaturesType1.js b/components/templates/TemplateFeaturesType1.js
@@ -0,0 +1,27 @@
+import React from 'react'
+
+const TemplateFeaturesType1 = ({ featuresData }) => {
+    return (
+        <div className='template-features1-outer'>
+            <div className='template-features1'>
+                {featuresData.map((data, i) => (
+                    <div key={i} className='template-features1-card'>
+                        <div className='template-features1-card-top'>
+                            <img src={data.src} alt={data.title}></img>
+                        </div>
+                        <div className='template-features1-card-bottom'>
+                            <h5 className='template-features1-card-bottom-title'>
+                                {data.title}
+                            </h5>
+                            <p className='template-features1-card-bottom-description'>
+                                {data.description}
+                            </p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default TemplateFeaturesType1
diff --git a/components/templates/TemplateFeaturesType2.js b/components/templates/TemplateFeaturesType2.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+const TemplateFeaturesType2 = ({ featuresData }) => {
+    return (
+        <div className='template-features2-outer'>
+            <div className='template-features2'>
+                {featuresData.map((data, i) => (
+                    <div key={i} className={`template-features2-card ${i === 1 && "template-features2-card-withMargin"} ${(i != 0 && (i % 2 === 0)) && "template-features2-card-withoutMargin"}`}>
+                        <img className='template-features2-card-img' src={data.src} alt={data.title} />
+                        <h2>{data.title}</h2>
+                        <p>{data.description}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default TemplateFeaturesType2
diff --git a/components/templates/TemplateRelated.js b/components/templates/TemplateRelated.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+const TemplateRelated = ({ relatedData }) => {
+    return (
+        <div className='template-related-outer'>
+            <div className='template-related'>
+                <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'>
+                            <img src={data.src} alt={"Related Image " + i} />
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TemplateRelated
diff --git a/components/templates/TemplateSeparator.js b/components/templates/TemplateSeparator.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const TemplateSeparator = ({ separatorLogo }) => {
+    return (
+        <div className='' style={{ display: "flex", alignItems: "center", gap: "1.5rem" }}>
+            <span className='' style={{ flex: "1", height: "1px", backgroundColor: "var(--surface-border)" }}></span>
+            <span style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "3rem", width: "3rem",  }}>
+                {separatorLogo}
+            </span>
+            <span className='' style={{ flex: "1", height: "1px", backgroundColor: "var(--surface-border)" }}></span>
+        </div>
+    )
+}
+
+export default TemplateSeparator
diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js
@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import { Dialog } from '../lib/primereact.all'
+
+const TemplateYoutube = ({
+    playIcon,
+    imgSrc,
+    title = ["Integration with", "Existing Vite Applications"],
+    description = "Only the folders that are related to the layout needs to move in to your project. We‘ve already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.",
+    youtubeLink = "https://www.youtube.com/embed/Y07edRJd5QM"
+}) => {
+    const [youtubeVideoVisible, setYoutubeVideoVisible] = useState(false);
+
+    return (
+        <div className='template-youtube-outer'>
+            <div className='template-youtube'>
+                <div className='template-youtube-title'>
+                    {title.map((data, i) => (
+                        <h2 key={i}>{data}</h2>
+                    ))}
+                </div>
+                <div className='template-youtube-description'>
+                    {description}
+                </div>
+                <div className='template-youtube-screen' onClick={() => setYoutubeVideoVisible(true)}>
+                    <div className='template-youtube-screen-blur'>
+                        <div className='template-youtube-screen-play'>
+                            {playIcon}
+                        </div>
+                    </div>
+                    <img src={imgSrc} alt="Template Youtube Screen" />
+                </div>
+                <Dialog header="Video Content" visible={youtubeVideoVisible} style={{ width: '70vw' }} onHide={() => setYoutubeVideoVisible(false)}>
+                    <div className='template-youtube-video'>
+                        <iframe src={youtubeLink} title="PrimeNG 2023 Roadmap" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+                    </div>
+                </Dialog>
+            </div>
+        </div>
+    )
+}
+
+export default TemplateYoutube
diff --git a/...templates/apollo/ApolloFeaturesSection.js → ...resanimation/TemplateFeaturesAnimation.js b/...templates/apollo/ApolloFeaturesSection.js → ...resanimation/TemplateFeaturesAnimation.js
@@ -1,18 +1,26 @@
 import React, { useRef } from 'react'
-import useAnimatedFeatures from './useAnimatedFeatures ';
-import ApolloFeaturesInline from './ApolloFeaturesInline';
+import useAnimatedFeatures from './useAnimatedFeatures';
+import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline';
 
-const ApolloFeaturesSection = ({ featuresData }) => {
+const TemplateFeaturesAnimation = ({ featuresData, title }) => {
     const animationRef = useRef(null)
     const { selectedID, handleClick } = useAnimatedFeatures(animationRef, featuresData.length);
-    
+
     return (
-        <div className='apollo-features-animation' ref={animationRef}>
-            <div className='template-features-animation' >
+        <div className='template-features-animation-outer'>
+            {!!title &&
+                <div className='template-features-animation-title'>
+                    {title.map((data, i) => (
+                        <h2 key={i}>{data}</h2>
+                    ))}
+                </div>}
+            <div className='template-features-animation' ref={animationRef}>
                 <div className='template-features-animation-left'>
                     {featuresData.map((data, i) => (
                         <div key={i} 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'>{i + 1}</div>
+                            <div className='template-features-animation-left-card-order'>
+                                0{i + 1}
+                            </div>
                             <div>
                                 <h5>{data.title}</h5>
                                 <p>{data.description}</p>
@@ -22,12 +30,12 @@ const ApolloFeaturesSection = ({ featuresData }) => {
                 </div>
                 <div className='template-features-animation-right'>
                     {featuresData[selectedID - 1]?.type === "inline-animation" ?
-                        <ApolloFeaturesInline inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData} parentHandleClick={handleClick} parentID={selectedID}/>
+                        <TemplateFeaturesAnimationInline inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData} parentHandleClick={handleClick} parentID={selectedID} />
                         : <img src={featuresData[selectedID - 1]?.src} alt='Animation Feature Image' />}
                 </div>
             </div>
         </div>
     )
 }
 
-export default ApolloFeaturesSection
+export default TemplateFeaturesAnimation
diff --git a/.../templates/apollo/ApolloFeaturesInline.js → ...mation/TemplateFeaturesAnimationInline.js b/.../templates/apollo/ApolloFeaturesInline.js → ...mation/TemplateFeaturesAnimationInline.js
@@ -1,27 +1,27 @@
 import React, { useRef } from 'react'
-import useAnimatedFeatures from './useAnimatedFeatures ';
+import useAnimatedFeatures from './useAnimatedFeatures';
 
-const ApolloFeaturesInline = ({ inlineFeaturesData, parentHandleClick, parentID }) => {
-    const animationRef = useRef(null)
-    const { selectedID, handleClick } = useAnimatedFeatures(animationRef, inlineFeaturesData.length,1000);
+const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentID }) => {
+    const animationInlineRef = useRef(null)
+    const { selectedID, handleClick } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, 1000);
 
-    const handleBtnClick=(id)=>{
+    const handleBtnClick = (id) => {
         handleClick(id)
         parentHandleClick(parentID)
     }
 
     return (
-        <div className='template-features-animation-right-inline' ref={animationRef}>
+        <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 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' />
+                <img src={inlineFeaturesData[selectedID - 1].src} alt='Animation Inline Feature Image' />
             </div>
         </div>
     )
 }
 
-export default ApolloFeaturesInline
+export default TemplateFeaturesAnimationInline
diff --git a/.../templates/apollo/useAnimatedFeatures .js → ...efeaturesanimation/useAnimatedFeatures.js b/.../templates/apollo/useAnimatedFeatures .js → ...efeaturesanimation/useAnimatedFeatures.js
diff --git a/pages/templates/apollo/useVisible.js → ...s/templatefeaturesanimation/useVisible.js b/pages/templates/apollo/useVisible.js → ...s/templatefeaturesanimation/useVisible.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-       
-const useVisible = (element, rootMargin=0.2) => {
+
+const useVisible = (element, rootMargin = 0.2) => {
     const [isVisible, setIsVisible] = useState(false);
 
     useEffect(() => {
@@ -16,7 +16,7 @@ const useVisible = (element, rootMargin=0.2) => {
         }
 
         return () => {
-            if(observer && element.current){
+            if (observer && element.current) {
                 observer.unobserve(element.current)
             }
         }