import React from 'react'; import { FaBook, FaVideo, FaCheckCircle } from 'react-icons/fa'; import { IconType } from 'react-icons'; // Content configuration const content = { heading: "Bitcoin Education Center", courses: [ { level: 'Beginner', topics: [ { title: 'What is Bitcoin?', description: 'An introduction to Bitcoin and its role in the digital economy.', type: 'Article', link: '#', }, { title: 'How to Buy Bitcoin', description: 'A step-by-step guide on how to purchase Bitcoin safely.', type: 'Video', link: '#', }, { title: 'Understanding Blockchain', description: 'Learn the basics of blockchain technology and how it underpins Bitcoin.', type: 'Article', link: '#', }, ], }, { level: 'Intermediate', topics: [ { title: 'Bitcoin Mining Explained', description: 'Dive into the world of Bitcoin mining and how new coins are created.', type: 'Article', link: '#', }, { title: 'Securing Your Bitcoin', description: 'Best practices for keeping your Bitcoin safe from theft and loss.', type: 'Video', link: '#', }, { title: 'Using Bitcoin Wallets', description: 'A comprehensive guide to different types of Bitcoin wallets and how to use them.', type: 'Article', link: '#', }, ], }, { level: 'Advanced', topics: [ { title: 'Bitcoin Trading Strategies', description: 'Learn advanced trading strategies to maximize your profits in the Bitcoin market.', type: 'Video', link: '#', }, { title: 'Smart Contracts on Bitcoin', description: 'Explore the possibilities of smart contracts built on Bitcoin.', type: 'Article', link: '#', }, { title: 'Running a Bitcoin Node', description: 'A technical guide on how to run your own Bitcoin node.', type: 'Article', link: '#', }, ], }, ], startButtonText: "Start" }; // Theme configuration const theme = { gradientDirection: "to-br", bgGradientFrom: "from-gray-950", bgGradientTo: "to-gray-900", headingGradientFrom: "from-yellow-400", headingGradientTo: "to-orange-500", levelTitleColor: "text-white", cardBg: "bg-gray-800", cardTitleColor: "text-white", cardDescriptionColor: "text-gray-400", iconColor: "text-yellow-400", buttonGradientFrom: "from-yellow-400", buttonGradientTo: "to-orange-500", buttonHoverFrom: "hover:from-yellow-500", buttonHoverTo: "hover:to-orange-600", buttonTextColor: "text-white", }; interface TopicProps { topic: { title: string; description: string; type: string; link: string; }; } const Topic: React.FC = ({ topic }) => { const getIcon = (type: string): IconType => { switch (type) { case 'Article': return FaBook; case 'Video': return FaVideo; default: return FaCheckCircle; } }; const Icon = getIcon(topic.type); return (

{topic.title}

{topic.description}

{content.startButtonText} {topic.type}

); }; const BTCEducationCenter: React.FC = () => { return (

{content.heading}

{content.courses.map((course, index) => (

{course.level} Level

{course.topics.map((topic, idx) => ( ))}

))}

); }; export default BTCEducationCenter;

Education Components

Bitcoin Education