Strike

mkdir -p components/cards && touch components/cards/strike.tsx && components/cards/check-box.tsx

import React, { Dispatch, SetStateAction, useState } from "react";
import { motion } from "framer-motion";
 
interface CheckboxProps {
  isChecked: boolean;
  setIsChecked: Dispatch<SetStateAction<boolean>>;
}
 
const Checkbox: React.FC<CheckboxProps> = ({ isChecked, setIsChecked }) => {
  const checkboxVariants = {
    checked: {
      backgroundColor: "black",
      borderColor: "black",
      transition: {
        duration: 0.5,
      },
    },
    unchecked: {
      backgroundColor: "#ccc",
      borderColor: "#ccc",
      transition: {
        duration: 0.5,
      },
    },
  };
 
  const checkmarkVariants = {
    checked: {
      pathLength: 1,
      opacity: 1,
      transition: {
        duration: 0.5,
      },
    },
    unchecked: {
      pathLength: 0,
      opacity: 0,
      transition: {
        duration: 0.5,
      },
    },
  };
 
  const spring = {};
 
  return (
    <motion.div
      className="w-6 h-6 border-2 rounded-md flex items-center justify-center cursor-pointer"
      variants={checkboxVariants}
      animate={isChecked ? "checked" : "unchecked"}
      onClick={() => setIsChecked(!isChecked)}
      whileTap={{
        scale: 0.8,
      }}
    >
      <svg width="12" height="10" viewBox="0 0 12 10" className="stroke-white">
        <motion.path
          fill="none"
          strokeWidth="2"
          stroke="white"
          d="M1 5.5L4 8.5L11 1.5"
          variants={checkmarkVariants}
          initial="unchecked"
          transition={spring}
          animate={isChecked ? "checked" : "unchecked"}
        />
      </svg>
    </motion.div>
  );
};
 
export default Checkbox;

"use client";
 
import React, { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import Checkbox from "@/components/hand-crafted/check-box";
 
const CheckCard = () => {
  const [checked, setChecked] = useState(false);
 
  const variants = {
    initial: {
      width: 0,
      height: 2,
      x: -100,
      transition: {
        duration: 0.5,
      },
    },
    animate: {
      width: "100%",
      height: 2,
      x: 0,
      transition: {
        duration: 0.5,
      },
    },
    exit: {
      width: 0,
      height: 0,
      x: -100,
      transition: {
        duration: 0.5,
      },
    },
  };
 
  return (
    <div className="h-full center w-full">
      <motion.div className="bg-muted w-60 items-center rounded-lg flex p-5 ">
        <Checkbox isChecked={checked} setIsChecked={setChecked} />
        <div className="px-5 overflow-hidden">
          <div className="relative">
            <span className="cursor-pointer" onClick={()=>setChecked(!checked)}>Post on Linkedin</span>
            <AnimatePresence>
              {checked && (
                <motion.span
                  variants={variants}
                  initial="initial"
                  animate="animate"
                  exit="exit"
                  className="absolute left-0 bg-white w-full top-0 bottom-0 my-auto rounded-full pointer-events-none
                "
                />
              )}
            </AnimatePresence>
          </div>
        </div>
      </motion.div>
    </div>
  );
};
 
export default CheckCard;