import React, { useState, useEffect } from ‘react’;
import { Heart, ChevronRight, ChevronLeft, Check, Sparkles, BookOpen, Music, Coffee, Mail, Sun, Smile, Compass, Feather, Star } from ‘lucide-react’;
const DAYS_DATA = [
{
day: 1,
icon: ,
emoji: «🌷»,
title: «¿Quién soy cuando no estoy siendo “la novia de alguien”?»,
objective: «Reconectar con su identidad.»,
activity: (
Mi mapa de mí
En una hoja (o en tu mente si prefieres), imagina un círculo en el centro con tu nombre. Alrededor de ese círculo, existen 6 espacios fundamentales:
Lo que me gusta
Lo que se me da bien
Lo que me da curiosidad
Lo que sueño
Lo que valoro
Lo que quiero descubrir de mí
Intenta pensar o escribir al menos 3 cosas en cada espacio. 🎨 Puedes hacerlo tan creativo como quieras.
),
inputs: [
{ id: ‘d1_q1’, label: ‘¿Qué cosas de mí siguen existiendo aunque hoy esté atravesando una ruptura?’, type: ‘textarea’ },
{ id: ‘d1_q2’, label: ‘Elige una palabra que represente cómo quieres sentirte contigo misma durante estos días:’, type: ‘text’ }
]
},
{
day: 2,
icon: ,
emoji: «🦋»,
title: «Mi cuerpo también sabe quién soy»,
objective: «Favorecer conexión corporal y seguridad.»,
activity: (
Playlist de mi energía
Crea una playlist de solo 3 canciones:
Una canción que represente cómo te sientes hoy.
Una canción que te haga sentir poderosa.
Una canción que te haga sentir viva.
El Reto:
Pon la segunda canción y báilala durante 3 minutos. Sin mirarte al espejo, sin pensar en cómo te ves.
Solo pregúntate: ¿Cómo se siente mi cuerpo cuando dejo de intentar verme bien y simplemente me permito estar?
),
inputs: [
{ id: ‘d2_q1’, label: ‘Escribe tres palabras sobre cómo te sentiste al terminar:’, type: ‘text’, placeholder: ‘Palabra 1, Palabra 2, Palabra 3’ }
]
},
{
day: 3,
icon: ,
emoji: «🌻»,
title: «Cita conmigo»,
objective: «Fomentar autonomía y demostrarte que puedes disfrutar de tu propia compañía.»,
activity: (
Hoy tendrás una cita contigo misma. Elige una actividad que normalmente harías acompañada:
🍦 Ir por un helado
🚶♀️ Caminar
🎁 Comprar algo pequeño
🌳 Sentarse en un parque
📚 Ir a una librería
☕ Tomarse algo
🎨 Pintar
✨ Visitar un lugar bonito
La única condición:
No hacerlo mientras hablas por chat con alguien. Tienes que estar realmente presente.
),
inputs: [
{ id: ‘d3_q1’, label: ‘Al regresar responde: ¿Qué descubrí de mí cuando no necesitaba que alguien estuviera conmigo para disfrutar?’, type: ‘textarea’ }
]
},
{
day: 4,
icon: ,
emoji: «💌»,
title: «Lo que quiero volver a darme»,
objective: «Trabajar autoestima y necesidades emocionales.»,
activity: (
Carta de reparación
Vas a escribirte una carta. Háblate como le hablarías a una amiga que está pasando por una ruptura.
Puedes incluir:
Lo que reconoces que has sentido.
Lo que necesitas escuchar.
Lo que no quieres volver a permitir.
Lo que mereces recibir.
Lo que quieres recordar cuando vuelvas a extrañar.
No tiene que ser una carta bonita. Tiene que ser una carta honesta.
),
inputs: [
{ id: ‘d4_q1’, label: ‘Escribe tu carta aquí:’, type: ‘textarea’, placeholder: ‘Querida yo, sé que estos días han sido…’ }
]
},
{
day: 5,
icon: ,
emoji: «🎈»,
title: «5 pequeñas cosas que todavía me dan placer»,
objective: «Reconectar con el placer cotidiano.»,
activity: (
Nota importante:
Placer no significa necesariamente diversión.
Durante el día de hoy, tienes que encontrar 5 momentos agradables, por pequeños que sean. Por ejemplo: sentir el sol, escuchar una canción, tomar una ducha larga, oler una crema…
),
customRender: ‘day5’
},
{
day: 6,
icon: ,
emoji: «🪞»,
title: «El espejo que no habla de mi apariencia»,
objective: «Fortalecer autoestima más allá del aspecto físico.»,
activity: (
Frente a un espejo, obsérvate durante un minuto.
La regla:
No puedes hablar de tu cuerpo, peso, cabello, piel, ropa o belleza.
Después, completa 10 frases que empiecen con «Me gusta de mí…».
Ej: «Me gusta que soy curiosa», «Me gusta mi sentido del humor»…
Hoy debes tomar 5 decisiones conscientemente, sin preguntarle inmediatamente a otra persona qué deberías hacer.
Ejemplos: Qué ropa ponerte, qué desayunar, qué música escuchar, qué plan aceptar o rechazar.
Registra tus decisiones abajo:
),
customRender: ‘day7’
},
{
day: 8,
icon: ,
emoji: «🌊»,
title: «Soltar no significa dejar de querer»,
objective: «Procesar la ruptura sin obligarte a “superarla”.»,
activity: (
El ritual de lo que dejo y lo que me llevo.
Anota en los dos espacios siguientes lo que decides soltar y lo que decides conservar de esta experiencia.
Lo que dejo: Expectativas, culpa, preguntas sin respuesta…
Lo que me llevo: Lo que aprendí, lo que descubrí de mí, lo que necesito…
),
customRender: ‘day8’
},
{
day: 9,
icon: ,
emoji: «✨»,
title: «Haz algo que nunca hayas hecho»,
objective: «Recuperar curiosidad, espontaneidad y sensación de posibilidad.»,
activity: (
Hoy tienes que hacer algo nuevo. No tiene que ser algo enorme.
Puede ser: Aprender una coreografía, cocinar algo diferente, dibujar con una técnica nueva, probar un deporte, aprender palabras de otro idioma…
La regla: No importa si lo haces bien.
),
inputs: [
{ id: ‘d9_q1’, label: ‘¿Qué sentí al hacer algo sin saber previamente si sería buena?’, type: ‘textarea’ }
]
}
];
function Flower(props) {
return (
)
}
export default function App() {
const [currentDay, setCurrentDay] = useState(1);
const [journal, setJournal] = useState({});
const [completedDays, setCompletedDays] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
// Cargar datos guardados al inicio
useEffect(() => {
const savedJournal = localStorage.getItem(‘miLugarSeguro_journal’);
const savedCompleted = localStorage.getItem(‘miLugarSeguro_completed’);
if (savedJournal) setJournal(JSON.parse(savedJournal));
if (savedCompleted) setCompletedDays(JSON.parse(savedCompleted));
setIsLoaded(true);
}, []);
// Guardar datos cuando cambian
useEffect(() => {
if (isLoaded) {
localStorage.setItem(‘miLugarSeguro_journal’, JSON.stringify(journal));
localStorage.setItem(‘miLugarSeguro_completed’, JSON.stringify(completedDays));
}
}, [journal, completedDays, isLoaded]);
const handleInputChange = (id, value) => {
setJournal(prev => ({ …prev, [id]: value }));
};
const toggleComplete = (day) => {
setCompletedDays(prev =>
prev.includes(day) ? prev.filter(d => d !== day) : […prev, day]
);
};
if (!isLoaded) return null;
const dayInfo = DAYS_DATA.find(d => d.day === currentDay);
const isCompleted = completedDays.includes(currentDay);
const progressPercentage = (completedDays.length / DAYS_DATA.length) * 100;
const renderCustomDay = (dayId) => {
switch(dayId) {
case ‘day5’:
return (
