Added Flashcards component by Mahmoud Ektefaie

src/App.jsx

@@ -1,72 +1,101 @@
-import { useState } from 'react';
-import Hero from './Hero';
-import Details from './components/kelixirr/Details';
-import Toast from './components/VictorEZCodes/Toast';
-import ProgressBar from './components/VictorEZCodes/ProgressBar';
-import ThemeSwitcher from './components/VictorEZCodes/ThemeSwitcher';
-import SearchFilter from './components/VictorEZCodes/SearchFilter';
-import FormValidator from './components/VictorEZCodes/FormValidator';
+import { useState } from 'react'
+import Hero from './Hero'
+import Details from './components/kelixirr/Details'
+import Toast from './components/VictorEZCodes/Toast'
+import ProgressBar from './components/VictorEZCodes/ProgressBar'
+import ThemeSwitcher from './components/VictorEZCodes/ThemeSwitcher'
+import SearchFilter from './components/VictorEZCodes/SearchFilter'
+import FormValidator from './components/VictorEZCodes/FormValidator'
+import FlashCards from './components/mektefaie/FlashCards'
 
 function App() {
- const [showToast, setShowToast] = useState(false);
- const [progress] = useState(0);
+ const [showToast, setShowToast] = useState(false)
+ const [progress] = useState(0)
 
  return (
  <>
  <Hero />
  <Details />
- 
+
  {/* Toast Demo Section */}
- <div style={{ padding: '40px 20px', borderTop: '1px solid var(--border-color)', textAlign: 'center' }}>
+ <div
+ style={{
+ padding: '40px 20px',
+ borderTop: '1px solid var(--border-color)',
+ textAlign: 'center',
+ }}
+ >
  <h2>Toast Notifications Demo</h2>
- <button 
+ <button
  onClick={() => setShowToast(true)}
  style={{ padding: '10px 20px', margin: '10px' }}
  >
  Show Toast
  </button>
  {showToast && (
- <Toast 
- message="Operation successful!" 
- type="success" 
+ <Toast
+ message='Operation successful!'
+ type='success'
  onClose={() => setShowToast(false)}
  />
  )}
  </div>
 
  {/* Progress Bar Demo Section */}
- <div style={{ padding: '40px 20px', borderTop: '1px solid var(--border-color)' }}>
+ <div
+ style={{
+ padding: '40px 20px',
+ borderTop: '1px solid var(--border-color)',
+ }}
+ >
  <ProgressBar progress={progress} />
  </div>
 
  {/* Theme Switcher Section */}
- <div style={{ 
- padding: '40px 20px',
- borderTop: '1px solid var(--border-color)',
- background: 'var(--background-color)'
- }}>
+ <div
+ style={{
+ padding: '40px 20px',
+ borderTop: '1px solid var(--border-color)',
+ background: 'var(--background-color)',
+ }}
+ >
  <ThemeSwitcher />
  </div>
 
  {/* Search Filter Section */}
- <div style={{ 
- padding: '40px 20px',
- background: 'var(--background-alt)',
- borderTop: '1px solid var(--border-color)'
- }}>
+ <div
+ style={{
+ padding: '40px 20px',
+ background: 'var(--background-alt)',
+ borderTop: '1px solid var(--border-color)',
+ }}
+ >
  <SearchFilter />
  </div>
 
  {/* Form Validator Section */}
- <div style={{ 
- padding: '40px 20px',
- borderTop: '1px solid var(--border-color)',
- background: 'var(--background-color)'
- }}>
+ <div
+ style={{
+ padding: '40px 20px',
+ borderTop: '1px solid var(--border-color)',
+ background: 'var(--background-color)',
+ }}
+ >
  <FormValidator />
  </div>
+
+ {/* FlashCards Section */}
+ <div
+ style={{
+ padding: '40px 20px',
+ borderTop: '1px solid var(--border-color)',
+ background: 'var(--background-color)',
+ }}
+ >
+ <FlashCards />
+ </div>
  </>
- );
+ )
 }
 
-export default App;
+export default App

src/Author.jsx

@@ -1,43 +1,43 @@
-import { FaGithub } from "react-icons/fa";
+import { FaGithub } from 'react-icons/fa'
 
 export default function Author({ name, githubLink }) {
  return (
  <div
  style={{
- margin: "2rem auto",
- width: "50%",
- minWidth: "300px",
- padding: "0.75rem",
- borderTop: "1px solid #eaeaea",
- borderBottom: "1px solid #eaeaea",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- gap: "0.75rem",
- fontSize: "0.875rem",
- color: "#222",
+ margin: '2rem auto',
+ width: '50%',
+ minWidth: '300px',
+ padding: '0.75rem',
+ borderTop: '1px solid #eaeaea',
+ borderBottom: '1px solid #eaeaea',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '0.75rem',
+ fontSize: '0.875rem',
+ color: '#222',
  }}
  >
  <span>The Above Component Is Created By {name}</span>
  <span>•</span>
  <a
  href={githubLink}
- target="_blank"
- rel="noopener noreferrer"
+ target='_blank'
+ rel='noopener noreferrer'
  style={{
- display: "flex",
- alignItems: "center",
- gap: "0.25rem",
- color: "#0070f3",
- textDecoration: "none",
- transition: "color 0.2s ease",
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.25rem',
+ color: '#0070f3',
+ textDecoration: 'none',
+ transition: 'color 0.2s ease',
  }}
- onMouseOver={(e) => (e.currentTarget.style.color = "#0051af")}
- onMouseOut={(e) => (e.currentTarget.style.color = "#0070f3")}
+ onMouseOver={e => (e.currentTarget.style.color = '#0051af')}
+ onMouseOut={e => (e.currentTarget.style.color = '#0070f3')}
  >
  <FaGithub />
  GitHub
  </a>
  </div>
- );
+ )
 }

src/components/mektefaie/FlashCards.jsx

@@ -0,0 +1,68 @@
+import styles from '../mektefaie/FlashCards.module.css'
+import Author from '../../Author'
+import { useState } from 'react'
+
+const cards = [
+ {
+ id: 1,
+ question: 'The creator of ReactDevs project?',
+ answer: 'Amritesh Kumar',
+ },
+ {
+ id: 2,
+ question: 'When was ReactDevs project created?',
+ answer: '2024',
+ },
+ {
+ id: 3,
+ question: 'The first contributor to ReactDevs project?',
+ answer: 'Victor Ezeanyika',
+ },
+ {
+ id: 4,
+ question: 'Best React course?',
+ answer: "Jonas Schmedtmann's Ultimate React course on Udemy",
+ },
+ {
+ id: 5,
+ question: 'Best Frontend bootcamp?',
+ answer: 'Scrimba.com',
+ },
+ {
+ id: 6,
+ question: 'Best Backend bootcamp?',
+ answer: 'Boot.dev',
+ },
+]
+
+export default function FlashCards() {
+ const [selectedId, setSelectedID] = useState(null)
+
+ function handleClick(id) {
+ setSelectedID(id === selectedId ? null : id)
+ }
+
+ return (
+ <section className={styles.section}>
+ <h2 className={styles.description}>Flashcards</h2>
+ <p className={styles.description}>
+ Interactive Flashcards: click on each card to reveal the answer.
+ </p>
+ <div className={styles.flashcards}>
+ {cards.map(question => (
+ <div
+ key={question.id}
+ className={question.id === selectedId ? styles.selected : ''}
+ onClick={() => handleClick(question.id)}
+ >
+ {question.id === selectedId ? question.answer : question.question}
+ </div>
+ ))}
+ </div>
+ <Author
+ name='Mahmoud Ektefaie'
+ githubLink='https://github.com/mektefaie'
+ />
+ </section>
+ )
+}

src/components/mektefaie/FlashCards.module.css

@@ -0,0 +1,49 @@
+.section {
+ max-width: var(--max-width-content);
+ margin: var(--spacing-xl-5) auto;
+ padding: var(--spacing-lg);
+}
+
+.description {
+ margin-bottom: var(--spacing-xl);
+ text-align: center;
+ color: var(--text-color);
+}
+
+.flashcards {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 20px;
+}
+
+.flashcards div {
+ border: 1px solid var(--border-color);
+ background-color: var(--border-color);
+ border-radius: var(--border-radius-md);
+ aspect-ratio: 2 / 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 20px;
+ cursor: pointer;
+}
+
+.selected {
+ border: 1px solid var(--primary-color) !important;
+ background-color: var(--primary-color) !important;
+ color: #fff;
+ font-weight: var(--font-weight-regular);
+}
+
+@media (max-width: 46rem) {
+ .flashcards {
+ grid-template-columns: 1fr 1fr;
+ }
+}
+
+@media (max-width: 38rem) {
+ .flashcards {
+ grid-template-columns: 1fr;
+ }
+}