À propos de

CodeWithY

CodeWithY est un portfolio professionnel présentant mes services de développement web et mes réalisations. Explorez mes projets, découvrez mes compétences et contactez-moi pour discuter de votre prochain projet numérique.

  • Portfolio de projets réalisés.
    Découvrez une sélection de projets web que j'ai développés, incluant des sites vitrines, des plateformes e-commerce et des applications web modernes utilisant les dernières technologies.
  • Services de développement web.
    Je propose des services de développement web personnalisés pour créer des sites web modernes, responsives et performants adaptés à vos besoins spécifiques.
  • Technologies modernes.
    Le site est construit avec Next.js, TypeScript, Tailwind CSS et Firebase, garantissant des performances optimales et une expérience utilisateur fluide.
  • Design monochrome élégant.
    Le site utilise une palette de couleurs monochrome (noir, blanc, gris) pour un design épuré et professionnel qui met en valeur le contenu.
  • Contact et collaboration.
    Vous pouvez me contacter directement via le formulaire de contact ou consulter mes réseaux sociaux pour discuter de vos projets et besoins.
  • En constante évolution.
    Ce site est régulièrement mis à jour avec de nouveaux projets et fonctionnalités. N'hésitez pas à revenir pour découvrir les dernières réalisations !
NotificationSetting.jsx
App.jsx
import { useState } from "react";

export default function NotificationSetting() {
    const [enabled, setEnabled] = useState(false);

    return (
        <div className="p-4 bg-gray-700 text-white rounded-lg">
            <label className="flex items-center space-x-3 cursor-pointer">
                <input
                    type="checkbox"
                    checked={enabled}
                    onChange={() => setEnabled(!enabled)}
                    className="hidden"
                />
                <span className={"w-10 h-5 flex items-center bg-gray-600 rounded-full p-1 " +
                    "transition duration-300 ease-in-out " + (enabled ? "bg-white" : "bg-gray-600")}>
                    <span className={"bg-white w-4 h-4 rounded-full shadow-md transform " +
                        "transition duration-300 ease-in-out " + (enabled ? "translate-x-5" : "")} />
                </span>
                <span>{enabled ? "Notifications Enabled" : "Notifications Disabled"}</span>
            </label>
        </div>
    );
}