Initial commit

.env.example

@@ -0,0 +1 @@
+PUBLIC_SITE_URL=https://example.com

README.md

@@ -1,48 +1,60 @@
-# Astro Starter Kit: Basics
+# Qual é o Próximo Feriado? 🎉
 
-```sh
-npm create astro@latest -- --template basics
-```
+Um projeto simples e divertido que mostra qual é o próximo feriado nacional no Brasil. Clique na mensagem para ver diferentes variações!
+
+Este projeto foi profundamente inspirado por projetos como [Should I Deploy Today][https://shouldideploy.today/] e [Devo Deployar][https://devodeployar.dev/].
+
+## 🚀 Tecnologias
+
+Este projeto foi desenvolvido com as seguintes tecnologias:
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+- [Astro](https://astro.build/) - Framework web com foco em performance
+- [React](https://react.dev/) - Biblioteca para construção de interfaces
+- [TypeScript](https://www.typescriptlang.org/) - JavaScript com tipagem estática
+- [Tailwind CSS](https://tailwindcss.com/) - Framework CSS utilitário
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+## 💻 Funcionalidades
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+- Mostra o próximo feriado nacional
+- Mensagens divertidas e personalizadas para cada feriado
+- Modo escuro/claro
+- Interface responsiva
+- Mensagens interativas (clique para mudar)
 
-## 🚀 Project Structure
+## 🎯 Como usar localmente
+
+1. Clone o repositório:
+
+```bash
+git clone https://github.com/igstefano/proximo-feriado.git
+```
 
-Inside of your Astro project, you'll see the following folders and files:
+2. Instale as dependências:
 
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+```bash
+bun install
 ```
 
-To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+3. Rode o projeto localmente:
+
+```bash
+bun astro dev
+```
+
+O projeto estará disponível em `http://localhost:4321`
+
+## 📁 Estrutura do Projeto
+
+O projeto segue uma estrutura organizada com componentes React, páginas Astro e utilitários TypeScript. Os feriados são armazenados em um arquivo JSON que pode ser facilmente atualizado.
+
+## 🤝 Contribuindo
 
-## 🧞 Commands
+Contribuições são sempre bem-vindas! Sinta-se à vontade para abrir uma issue ou enviar um pull request.
 
-All commands are run from the root of the project, from a terminal:
+## 📝 Licença
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
 
-## 👀 Want to learn more?
+---
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+Feito com ❤️ por [Igor Stefano][https://github.com/igstefano]

astro.config.mjs

@@ -1,5 +1,17 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
+
+import react from "@astrojs/react";
+
+import tailwind from "@astrojs/tailwind";
+
+import node from "@astrojs/node";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  integrations: [react(), tailwind()],
+  output: "server",
+  adapter: node({
+    mode: "standalone",
+  }),
+});

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "proximo-feriado",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
@@ -9,6 +9,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^5.0.5"
+    "@astrojs/node": "^9.0.0",
+    "@astrojs/react": "^4.1.0",
+    "@astrojs/tailwind": "^5.1.3",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "astro": "^5.0.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.16"
   }
-}
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/components/DarkModeButton.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from "react";
+
+export default function DarkModeButton() {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+
+    const theme = savedTheme ? savedTheme === "dark" : prefersDark;
+    document.cookie = `theme=${
+      theme ? "dark" : "light"
+    }; path=/; max-age=31536000; SameSite=Strict`;
+    return theme;
+  });
+
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+      document.cookie = "theme=dark; path=/; max-age=31536000; SameSite=Strict";
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+      document.cookie =
+        "theme=light; path=/; max-age=31536000; SameSite=Strict";
+    }
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-100 duration-300 transition-colors"
+      aria-label={`Trocar para ${isDarkMode ? "light" : "dark"} mode`}
+    >
+      {isDarkMode ? (
+        <svg
+          className="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ) : (
+        <svg
+          className="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      )}
+    </button>
+  );
+}

src/components/Footer.astro

@@ -0,0 +1,3 @@
+<footer class="w-full flex justify-center gap-8 mb-8">
+    <a href="https://github.com/igstefano/proximo-feriado" class="text-xs no-underline text-emerald-900 dark:text-emerald-100">GitHub</a>
+</footer>

src/components/Holiday.tsx

@@ -0,0 +1,39 @@
+import { getHolidayByName } from "../utils/getHoliday";
+import holidays from "../data/holidays.json";
+import { getMessage } from "../utils/getMessage";
+import { useState } from "react";
+
+interface HolidayProps {
+  holidayData: {
+    name: string;
+    message: {
+      text: string;
+      emoji: string;
+    };
+  };
+}
+
+export default function Holiday({ holidayData }: HolidayProps) {
+  const [currentMessage, setCurrentMessage] = useState(holidayData.message);
+
+  const changeMessage = () => {
+    const { messages } = getHolidayByName({ holidays, name: holidayData.name });
+    const message = getMessage(messages);
+
+    setCurrentMessage(message);
+  };
+  return (
+    <main className="h-full flex justify-center flex-col">
+      <h2 className="font-fredoka text-4xl text-center mb-8">
+        {holidayData.name}
+      </h2>
+      <h1
+        onClick={changeMessage}
+        className="text-red-700 font-bold text-3xl sm:text-5xl lg:text-7xl cursor-pointer text-center px-4"
+      >
+        {currentMessage.text}
+        <span> {currentMessage.emoji}</span>
+      </h1>
+    </main>
+  );
+}