import React from "react"; import { FaCalendarAlt, FaBookmark, FaShare, FaNewspaper, FaSun, FaWind, FaThermometerHalf, FaChartBar, FaAd, FaHashtag, FaArrowRight, FaCloudSun, FaUmbrella, FaCompass, FaExclamationTriangle } from "react-icons/fa"; // Configuration object for customizable content const config = { newspaper: { name: "THE BRUTALIST TIMES", date: "APRIL 1ST, 2025", price: "$4.20", motto: "ALL THE NEWS THAT'S FIT TO BREAK", }, colors: { yellow: "#FFE899", blue: "#96CFFF", pink: "#FFE4E4", black: "#323232", teal: "#BAFCA2", }, alert: { label: "DESIGN POLICE REPORT", message: "Developer Uses Default Browser Styles, Claims \"It's Minimalist\" 🚨", icon: "FaExclamationTriangle", type: "urgent" }, weather: { temp: "72°F", condition: "EXTREMELY SUNNY", wind: "10 MPH", forecast: "PERFECT FOR CODING", humidity: "45%", feelsLike: "69°F", direction: "NW", hourly: [ { time: "NOW", temp: "72°F", icon: "FaSun" }, { time: "2PM", temp: "75°F", icon: "FaCloudSun" }, { time: "4PM", temp: "73°F", icon: "FaSun" }, { time: "6PM", temp: "70°F", icon: "FaCloudSun" }, ], warning: "WARNING: Extremely good vibes detected in the atmosphere" }, trending: [ "#BrutalismTakeover", "#ShadowGate2024", "#CSSGoneWild", "#DesignerMeltdown", "#BorderRadiusRevolution" ], mainStory: { headline: "DESIGNERS IN UPROAR AS SHADOWS TAKE OVER", subheadline: "Minimalism Crumbles Under the Weight of Bold Chaos", content: "In a shocking twist, designers everywhere are losing their cool as shadows grow bolder and more unruly. \"It's like the shadows have a mind of their own,\" says a bewildered UI expert. \"They're out of control, and we love it!\" The design world is in chaos, and the minimalists are crying in Helvetica.\n\nLocal agencies are scrambling to keep up as shadow-offset values skyrocket, with some reporting shadow spreads of up to 50 pixels. \"It's a beautiful mess,\" says Maria Vector, a senior designer at Pixel Perfect Studios. \"Our drop shadows are dropping jaws.\"", author: "By Jane Pixelton", image: "https://images.unsplash.com/photo-1482160549825-59d1b23cb208?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, sideStories: [ { title: "Grid Systems Declared Ancient", excerpt: "Chaos reigns supreme as designers ditch the grid for good", }, { title: "Serif Fonts Party Like It's 1999", excerpt: "Times New Roman and Helvetica spotted at the wildest bash of the year", }, { title: "Dev Adds 5th Border, Laughs in CSS", excerpt: "\"Four borders? That's for amateurs,\" boasts a daring developer", }, ], classifieds: [ { title: "WANTED: Missing Semicolons, No Questions Asked", description: "Reward offered for their safe return. Last seen causing chaos in production.", contact: "debug@example.com" }, { title: "FOR SALE: Vintage

s, Untouched by Flexbox", description: "Pristine condition. Perfect for collectors of the absurd.", contact: "collector@example.com" }, { title: "SEEKING: React Developer with a Love for Anarchy", description: "Must thrive in chaos. Hooks experience a plus, but not required.", contact: "hire@example.com" } ], breakingNews: [ { id: 1, icon: "FaBolt", text: "BREAKING: Local designer discovers third dimension, chaos ensues", type: "urgent" }, { id: 2, icon: "FaExclamationTriangle", text: "CSS Variables spotted organizing union against preprocessors", type: "alert" }, { id: 3, icon: "FaBolt", text: "jQuery spotted in modern codebase, developers in disbelief", type: "urgent" }, { id: 4, icon: "FaExclamationTriangle", text: "Breaking: Developers declare tabs superior to spaces, war imminent", type: "alert" } ], }; // Newspaper Header Component const NewspaperHeader = () => (

{config.newspaper.date}

{config.newspaper.price}

{config.newspaper.name}

{config.newspaper.motto}

); // Weather Widget Component const WeatherWidget = () => { const getWeatherIcon = (iconName: string) => { switch(iconName) { case "FaSun": return ; case "FaCloudSun": return ; default: return ; } }; return (

TODAY'S WEATHER

{config.weather.temp}

{config.weather.wind}

{config.weather.humidity}

{config.weather.direction}

{config.weather.warning}

{config.weather.hourly.map((hour, index) => (

{hour.time}

{getWeatherIcon(hour.icon)}

{hour.temp}

))}

{config.weather.forecast}

); }; // Trending Topics Component const TrendingTopics = () => (

TRENDING NOW

{config.trending.map((topic, index) => (

{topic}

))}

); // Classified Ads Component const ClassifiedAds = () => (

CLASSIFIED ADS

{config.classifieds.map((ad, index) => (

{ad.title}

{ad.description}

Contact

))}

); // Main Article Component const MainArticle = () => (

{config.mainStory.headline}

{config.mainStory.subheadline}

{config.mainStory.author}

{config.mainStory.content}

); // Side Stories Component const SideStories = () => (

{config.sideStories.map((story, index) => (

{story.title}

{story.excerpt}

))}

); // Static Alert Component const NewsAlert = () => (

{config.alert.label}

{config.alert.message}

); // Main Newspaper Component export default function NewsPaperEg() { return (

); }

News Components

Neubrutalism News Paper