3d-pin

1"use client";
2import React, { useState } from "react";
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6 
7export const PinContainer = ({
8  children,
9  title,
10  href,
11  className,
12  containerClassName,
13}: {
14  children: React.ReactNode;
15  title?: string;
16  href?: string;
17  className?: string;
18  containerClassName?: string;
19}) => {
20  const [transform, setTransform] = useState(
21    "translate(-50%,-50%) rotateX(0deg)"
22  );
23 
24  const onMouseEnter = () => {
25    setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)");
26  };
27  const onMouseLeave = () => {
28    setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)");
29  };
30 
31  return (
32    <a
33      className={cn(
34        "relative group/pin z-50  cursor-pointer",
35        containerClassName
36      )}
37      onMouseEnter={onMouseEnter}
38      onMouseLeave={onMouseLeave}
39      href={href || "/"}
40    >
41      <div
42        style={{
43          perspective: "1000px",
44          transform: "rotateX(70deg) translateZ(0deg)",
45        }}
46        className="absolute left-1/2 top-1/2 ml-[0.09375rem] mt-4 -translate-x-1/2 -translate-y-1/2"
47      >
48        <div
49          style={{
50            transform: transform,
51          }}
52          className="absolute left-1/2 p-4 top-1/2  flex justify-start items-start  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-black border border-white/[0.1] group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"
53        >
54          <div className={cn(" relative z-50 ", className)}>{children}</div>
55        </div>
56      </div>
57      <PinPerspective title={title} href={href} />
58    </a>
59  );
60};
61 
62export const PinPerspective = ({
63  title,
64  href,
65}: {
66  title?: string;
67  href?: string;
68}) => {
69  return (
70    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
71      <div className=" w-full h-full -mt-7 flex-none  inset-0">
72        <div className="absolute top-0 inset-x-0  flex justify-center">
73          <a
74            href={href}
75            target={"_blank"}
76            className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 py-0.5 px-4 ring-1 ring-white/10 "
77          >
78            <span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
79              {title}
80            </span>
81 
82// … truncated