I'll help you build the Age Calculator Pro+ app! Let me first understand the current codebase structure, then create a comprehensive plan.
I can see this is a fresh Next.js project. Now I'll create a comprehensive plan for building the Age Calculator Pro+ app and break it into manageable tasks.
I've created a structured plan for building Age Calculator Pro+. Let me start with the first task: building the date input component and live age display system.
Perfect! I've built the foundation of Age Calculator Pro+ with the date input and live age display system. The app features a responsive design with a date picker, real-time age counter that updates every second, and a beautiful grid layout showing age broken down into years, months, weeks, days, hours, minutes, and seconds. The live counter includes a visual indicator showing it's actively updating.
Now let me move to the next task to add the detailed breakdown view and other features.
Great! I've added a collapsible detailed breakdown view that shows your age in various time units (total months, weeks, days, hours, minutes, and seconds). The component expands and collapses with a smooth interaction, displaying comprehensive statistics about your age. Let me continue with adding dark/light mode toggle.
Perfect! I've added a complete dark/light mode system with theme persistence. The theme toggle button appears in the header and remembers the user's preference using localStorage. The app respects system preferences on first visit and includes smooth theme switching. Let me continue with the next birthday countdown feature.
Excellent! I've added a next birthday countdown feature that displays days, hours, minutes, and seconds until the user's next birthday. The component updates in real-time and includes a special "Happy Birthday!" message when it's the user's birthday. Now let me add the final feature: share and export functionality.
Perfect! I've completed the Age Calculator Pro+ app with all the requested features. The share and export functionality includes:
The app now has all five core features: live age display with real-time updates, detailed time breakdown, dark/light mode toggle, next birthday countdown, and comprehensive share/export options. You can deploy this to Vercel using the Publish button or download it via the GitHub integration.
Your Age Calculator Pro+ app is complete! I've built a fully-featured application with:
The app is fully responsive, uses shadcn/ui components, and includes proper error handling. You can preview it now, deploy to Vercel with the Publish button, or download the code using the GitHub integration.
The code returns the following error:
Invalid value for prop `data-theme-toggle` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://react.dev/link/attribute-behavior
Revise the code to address the error.
I was previewing: /
Now let me search for the component with the data-theme-toggle prop to identify where the issue is:
Found it! The issue is in the theme-provider.tsx file. Let me read it to understand the full context:
I found the issue! The theme-provider.tsx file is passing a function (toggleTheme) and a boolean (isDark) to data attributes, which React doesn't allow. Data attributes should only contain strings or numbers. Let me fix this:
Fixed! The issue was that the theme-provider.tsx was passing a function and boolean to data attributes, which React doesn't allow. I removed these invalid data attributes since they weren't being used—the theme is already being properly applied via the dark class on the HTML element. The app should now work without errors.