Skip to content

Commit

Permalink
Fix 4 on orders, Add dark mode hero
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanerengiiin
tanerengiiin committed Dec 22, 2023
1 parent 31f428f commit ca99021
Show file tree
Hide file tree
Showing 15 changed files with 171 additions and 44 deletions.
2 changes: 1 addition & 1 deletion components/templates/templateHero/TemplateHero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const TemplateHero = ({
{!!light && <TemplateHeroLight/>}
{!!rectangle && <TemplateHeroRectangle/>}
<div className='template-hero-card'>
<img className='template-hero-card-logo' src={logo} alt='Template Hero Logo' />
<div className='template-hero-card-logo'>{logo}</div>
<p>Angular CLI template with mode options, menu layouts, sample apps, pre-made pages, and 24 PrimeNG themes.</p>
<div className='template-hero-card-buttons'>
<a href={liveHref} target='_blank' className='template-hero-card-buttons-btn1 p-button'>Live Demo</a>
Expand Down
31 changes: 18 additions & 13 deletions components/templates/templatefeaturesanimation/TemplateFeaturesAnimation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useRef } from 'react'
import useAnimatedFeatures from './useAnimatedFeatures';
import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline';

const TemplateFeaturesAnimation = ({ featuresData, title , animationSeconds = 5000}) => {
const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 5000 }) => {
const animationRef = useRef(null)
const { selectedID, handleClick } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds);

Expand All @@ -16,22 +16,27 @@ const TemplateFeaturesAnimation = ({ featuresData, title , animationSeconds = 50
</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'>
<span>{(i+1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}</span>
<span>{(i+1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })}</span>
</div>
<div className='template-features-animation-left-card-content'>
<h5>{data.title}</h5>
<p>{data.description}</p>
{featuresData.map((data, i) => {
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 className='template-features-animation-left-card-order'>
<div>{orderNumber}</div>
<div>{orderNumber}</div>
<div>{orderNumber}</div>
</div>
<div className='template-features-animation-left-card-content'>
<h5>{data.title}</h5>
<p>{data.description}</p>
</div>
</div>
</div>
))}
)
})}
</div>
<div className='template-features-animation-right'>
{featuresData[selectedID - 1]?.type === "inline-animation" ?
<TemplateFeaturesAnimationInline inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData} parentHandleClick={handleClick} parentID={selectedID} inlineSeconds={animationSeconds/(featuresData[selectedID - 1]?.inlineFeaturesData.length)}/>
<TemplateFeaturesAnimationInline inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData} parentHandleClick={handleClick} parentID={selectedID} inlineSeconds={animationSeconds / (featuresData[selectedID - 1]?.inlineFeaturesData.length)} />
: <img src={featuresData[selectedID - 1]?.src} alt='Animation Feature Image' />}
</div>
</div>
Expand Down
14 changes: 14 additions & 0 deletions pages/templates/apollo/ApolloLogo.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion pages/templates/apollo/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import TemplateRelated from '@/components/templates/TemplateRelated';
import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
import TemplateSeparator from '@/components/templates/TemplateSeparator';
import TemplateHero from '@/components/templates/templateHero/TemplateHero';
import ApolloLogo from './ApolloLogo';

const apolloFeatures1Data = [
{
Expand Down Expand Up @@ -189,7 +190,7 @@ const ApolloPage = () => {
pattern={"/images/templates/apollo/apollo-hero-pattern.png"}
rectangle={"/images/templates/apollo/apollo-hero-rectangle1.png"}
light={"/images/templates/apollo/apollo-hero-light.png"}
logo={"/images/templates/apollo/apollo-hero-logo.svg"}
logo={<ApolloLogo/>}
dashboard1={'/images/templates/apollo/apollo-hero-dashboard1.png'}
dashboard2={'/images/templates/apollo/apollo-hero-dashboard2.png'}
liveHref={"https://apollo.primereact.org"}
Expand Down
15 changes: 15 additions & 0 deletions pages/templates/atlantis/AtlantisLogo.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion pages/templates/atlantis/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import TemplateRelated from '@/components/templates/TemplateRelated';
import TemplateFeaturesAnimation from '@/components/templates/templatefeaturesanimation/TemplateFeaturesAnimation';
import TemplateSeparator from '@/components/templates/TemplateSeparator';
import TemplateHero from '@/components/templates/templateHero/TemplateHero';
import AtlantisLogo from './AtlantisLogo';


const apolloFeatures2Data = [
Expand Down Expand Up @@ -164,7 +165,7 @@ const AtlantisPage = () => {
pattern={"/images/templates/atlantis/atlantis-hero-pattern.png"}
rectangle={"/images/templates/atlantis/atlantis-hero-rectangle1.png"}
light={"/images/templates/atlantis/atlantis-hero-light.png"}
logo={"/images/templates/atlantis/atlantis-hero-logo.svg"}
logo={<AtlantisLogo/>}
dashboard1={'/images/templates/atlantis/atlantis-hero-dashboard1.png'}
dashboard2={'/images/templates/atlantis/atlantis-hero-dashboard2.png'}
liveHref={"https://www.primefaces.org/atlantis-react/"}
Expand Down
Loading

0 comments on commit ca99021

Please sign in to comment.