1
npm i framer-motion

1
'use client';
2

3
import { ReactNode, useState } from 'react';
4
import { AnimatePresence, motion } from 'framer-motion';
5
import Link from 'next/link';
6

7
type ContactType = {
8
  name: string;
9
  id: string;
10
  logo: ReactNode;
11
  message: string;
12
  link: string;
13
};
14

15
const ContactSection = ({ contacts }: { contacts: ContactType[] }) => {
16
  const [hovered, setHovered] = useState<string | null>(null);
17

18
  return (
19
    <div className="max-w-[600px] flex flex-col gap-4 w-full items-start justify-start">
20
      <div className="flex sm:p-10 font-bold text-4xl w-full h-[300px] sm:h-[400px] rounded-3xl border-white/20 relative border-[1px] items-center justify-center">
21
        <div
22
          style={{
23
            perspective: '1000px',
24
            transform: 'rotateZ(-10deg) rotateY(25deg) rotateX(30deg)'
25
          }}
26
          className="h-[100px] sm:h-[150px] w-[95%] sm:w-[90%] bg-white/10 border-2 border-white/10 shadow-inner shadow-black/40 rounded-3xl flex items-center justify-center overflow-hidden"
27
        >
28
          <AnimatePresence mode="popLayout">
29
            {contacts.map((contact) => {
30
              return (
31
                contact.name === hovered && (
32
                  <motion.div
33
                    key={contact.name + contact.id}
34
                    initial={{
35
                      opacity: 0,
36
                      y: 100
37
                    }}
38
                    animate={{
39
                      opacity: 1,
40
                      y: 0
41
                    }}
42
                    exit={{
43
                      opacity: 0,
44
                      y: -100
45
                    }}
46
                    className="absolute inset-0 w-full h-full flex items-center justify-start whitespace-nowrap p-5 text-white"
47
                  >
48
                    <p className="text-xl sm:text-2xl">{contact.id}</p>
49
                  </motion.div>
50
                )
51
              );
52
            })}
53
          </AnimatePresence>
54
        </div>
55
        <AnimatePresence mode="popLayout">
56
          {contacts.map((contact) => {
57
            return (
58
              contact.name === hovered && (
59
                <motion.div
60
                  key={contact.name + contact.id + contact.logo + contact.message}
61
                  initial={{
62
                    opacity: 0
63
                  }}
64
                  animate={{
65
                    opacity: 1
66
                  }}
67
                  exit={{
68
                    opacity: 0
69
                  }}
70
                  className="absolute bottom-0 w-full flex items-center justify-start whitespace-nowrap p-5 text-sm md:text-base max-w-[1000px] text-white/85"
71
                >
72
                  <p>{contact.message}</p>
73
                </motion.div>
74
              )
75
            );
76
          })}
77
        </AnimatePresence>
78
      </div>
79

80
      <div className="flex items-center justify-start w-full">
81
        {contacts.map((contact) => {
82
          return (
83
            <Link key={contact.id + contact.link} href={contact.link} target="_blank">
84
              <motion.div
85
                initial={{
86
                  y: 0,
87
                  scale: 1
88
                }}
89
                whileHover={{
90
                  y: -10,
91
                  scale: 1.1
92
                }}
93
                className="cursor-pointer p-3 shrink-0"
94
                onTouchStart={() => setHovered(contact.name)}
95
                onTouchEnd={() => setHovered(null)}
96
                onMouseEnter={() => setHovered(contact.name)}
97
                onMouseLeave={() => setHovered(null)}
98
              >
99
                {contact.logo}
100
              </motion.div>
101
            </Link>
102
          );
103
        })}
104
      </div>
105
    </div>
106
  );
107
};
108

109
export default ContactSection;