Skip to content

Commit

Permalink
Update Card.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sasank123k
Sasank123k authored Jun 20, 2024
1 parent e5bef8b commit 21384df
Showing 1 changed file with 60 additions and 36 deletions.
96 changes: 60 additions & 36 deletions src/components/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@ import React, { useState } from 'react';
import styles from './CardSection.module.css';

const CardSection: React.FC = () => {
const [activeCard, setActiveCard] = useState<string | null>(null);
const [showCss, setShowCss] = useState(false);
const initialState = Array(7).fill(false);
const [showCss, setShowCss] = useState(initialState);

const toggleCodeView = (card: string) => {
if (activeCard === card) {
setShowCss(!showCss);
} else {
setActiveCard(card);
setShowCss(false);
}
const toggleCodeView = (index: number) => {
const newShowCss = [...showCss];
newShowCss[index] = !newShowCss[index];
setShowCss(newShowCss);
};

const copyToClipboard = (text: string) => {
Expand All @@ -22,59 +19,89 @@ const CardSection: React.FC = () => {

const cards = [
{
type: 'imageCard',
title: 'Enjoy $300',
text: 'New customers open an eligible checking account with qualifying electronic deposits.',
image: 'https://via.placeholder.com/150/FF0000/FFFFFF?text=$300',
link: '#'
},
{
type: 'titleCard',
title: 'Checking Accounts',
text: 'Manage your checking accounts with ease and convenience.',
image: 'https://via.placeholder.com/150/0000FF/FFFFFF?text=Checking',
link: '#'
},
{
type: 'testimonialCard',
title: 'Credit Cards',
text: 'Choose the best credit card for your needs and enjoy rewards.',
image: 'https://via.placeholder.com/150/FFFF00/000000?text=Credit+Cards',
testimonial: 'This credit card has been amazing for my needs. - Customer',
link: '#'
},
{
type: 'imageCard',
title: 'Home Loans',
text: 'Get the right home loan for your dream home.',
image: 'https://via.placeholder.com/150/00FF00/000000?text=Home+Loans',
link: '#'
},
{
type: 'titleCard',
title: 'Savings & CDs',
text: 'Grow your savings with our competitive rates.',
image: 'https://via.placeholder.com/150/FF00FF/FFFFFF?text=Savings+%26+CDs',
link: '#'
},
{
type: 'imageCard',
title: 'Auto Loans',
text: 'Find the perfect auto loan for your new car.',
image: 'https://via.placeholder.com/150/00FFFF/000000?text=Auto+Loans',
link: '#'
},
{
type: 'testimonialCard',
title: 'Personal Loans',
text: 'Get a personal loan for your financial needs.',
image: 'https://via.placeholder.com/150/FFAA00/000000?text=Personal+Loans',
testimonial: 'The personal loan process was quick and easy. - Customer',
link: '#'
}
];

const cardTsx = (title: string, text: string, image: string, link: string) => `
const cardTsx = (card: any) => {
if (card.type === 'imageCard') {
return `
<div className={styles.card}>
<img src="${image}" alt="${title} image" className={styles.cardImage} />
<img src="${card.image}" alt="${card.title} image" className={styles.cardImage} />
<div className={styles.cardContent}>
<h3 className={styles.cardTitle}>${title}</h3>
<p className={styles.cardText}>${text}</p>
<a href="${link}" className={styles.cardLink}>Go somewhere</a>
<h3 className={styles.cardTitle}>${card.title}</h3>
<p className={styles.cardText}>${card.text}</p>
<a href="${card.link}" className={styles.cardLink}>Go somewhere</a>
</div>
</div>
`;
} else if (card.type === 'titleCard') {
return `
<div className={styles.card}>
<div className={styles.cardContent}>
<h3 className={styles.cardTitle}>${card.title}</h3>
<p className={styles.cardText}>${card.text}</p>
<a href="${card.link}" className={styles.cardLink}>Go somewhere</a>
</div>
</div>
`;
} else if (card.type === 'testimonialCard') {
return `
<div className={styles.card}>
<div className={styles.cardContent}>
<h3 className={styles.cardTitle}>${card.title}</h3>
<p className={styles.cardText}>${card.text}</p>
<blockquote className={styles.testimonial}>"${card.testimonial}"</blockquote>
<a href="${card.link}" className={styles.cardLink}>Go somewhere</a>
</div>
</div>
`;
}
};

const cardCss = `
.card {
Expand Down Expand Up @@ -113,6 +140,12 @@ const CardSection: React.FC = () => {
.cardLink:hover {
text-decoration: underline;
}
.testimonial {
font-style: italic;
color: #555;
margin: 1rem 0;
}
`;

return (
Expand All @@ -121,27 +154,18 @@ const CardSection: React.FC = () => {
<div className={styles.cardGrid}>
{cards.map((card, index) => (
<div key={index} className={styles.cardContainer}>
<div className={styles.card}>
<img src={card.image} alt={`Card ${index + 1} image`} className={styles.cardImage} />
<div className={styles.cardContent}>
<h3 className={styles.cardTitle}>{card.title}</h3>
<p className={styles.cardText}>{card.text}</p>
<a href={card.link} className={styles.cardLink}>Go somewhere</a>
</div>
</div>
<div className={styles.card} dangerouslySetInnerHTML={{ __html: cardTsx(card) }}></div>
<div className={styles.toggleContainer}>
<button className={`${styles.toggleButton} ${activeCard === `card${index}` && showCss ? styles.active : ''}`} onClick={() => toggleCodeView(`card${index}`)}>
{activeCard === `card${index}` && showCss ? 'CSS' : 'TSX'}
<button className={`${styles.toggleButton} ${showCss[index] ? styles.active : ''}`} onClick={() => toggleCodeView(index)}>
{showCss[index] ? 'CSS' : 'TSX'}
</button>
</div>
{activeCard === `card${index}` && (
<div className={styles.codeBlock}>
<pre>
<code>{showCss ? cardCss : cardTsx(card.title, card.text, card.image, card.link)}</code>
</pre>
<button onClick={() => copyToClipboard(showCss ? cardCss : cardTsx(card.title, card.text, card.image, card.link))}>Copy {showCss ? 'CSS' : 'TSX'}</button>
</div>
)}
<div className={styles.codeBlock}>
<pre>
<code>{showCss[index] ? cardCss : cardTsx(card)}</code>
</pre>
<button onClick={() => copyToClipboard(showCss[index] ? cardCss : cardTsx(card))}>Copy {showCss[index] ? 'CSS' : 'TSX'}</button>
</div>
</div>
))}
</div>
Expand Down

0 comments on commit 21384df

Please sign in to comment.