Subscription Hub Copy this Tailwind SubscriptionSettingsto Your Project

Import { useState, useEffect } from 'react' import { useDispatch, useSelector } from 'react redux' import { monitorSubscription } from '../store/redux/subscriptionSlice' import { format } from 'date fns' import SubscriptionCalculator from './SubscriptionCalculator' const Settings = () => { const dispatch = useDispatch() const { subscription } = useSelector((state) => state.subscription) useEffect(() => { dispatch(monitorSubscription()) // Fetch subscription data on mount }, [dispatch]) const [darkMode, setDarkMode] = useState(false) const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 }) // Update countdown timer dynamically useEffect(() => { if (!subscription?.remaining_time) return const calculateTimeLeft = () => { const endTime = new Date(subscription.subscription_end_date).getTime() const now = new Date().getTime() const difference = endTime now if (difference <= 0) { clearInterval(timer) setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }) return } setTimeLeft({ days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / (1000 * 60)) % 60), seconds: Math.floor((difference / 1000) % 60) }) } const timer = setInterval(calculateTimeLeft, 1000) // Update every second calculateTimeLeft() // Run immediately return () => clearInterval(timer) // Cleanup }, [subscription]) return ( <div className={`min h screen flex flex col items center justify center p 6 ${darkMode ? 'bg gray 900 text white' : 'bg gray 100 text gray 800'}`}> <h1 className="text 2xl font bold mb 4">Subscription Details</h1> {/* Subscription Start & End Dates */} {subscription && ( <div className="mb 6 text center"> <p><strong>Start Date:</strong> {format(new Date(subscription.subscription_start_date), "dd MMM yyyy, HH:mm")}</p> <p><strong>End Date:</strong> {format(new Date(subscription.subscription_end_date), "dd MMM yyyy, HH:mm")}</p> <p><strong>Amount:</strong> ₹{subscription.amount}</p> <p><strong>Status:</strong> {subscription.subscription_status}</p> </div> )} {/* Countdown Timer */} <div className="grid grid cols 2 md:grid cols 4 gap 4 mb 6"> {['Days', 'Hours', 'Minutes', 'Seconds'].map((label, index) => ( <div key={label} className="p 4 bg gray 200 dark:bg gray 700 rounded lg text center"> <p className="text 5xl font bold">{Object.values(timeLeft)[index]}</p> <p className="text sm uppercase tracking wider">{label}</p> </div> ))} </div> <SubscriptionCalculator /> </div> ) } export default Settings style the code in tailwind css