Update src/tag/Tag.tsx
This commit is contained in:
113
src/tag/Tag.tsx
113
src/tag/Tag.tsx
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState } from 'react';
|
||||
|
||||
interface TeamMember {
|
||||
id: string;
|
||||
@@ -39,25 +39,26 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
{members.map((member) => (
|
||||
<div
|
||||
key={member.id}
|
||||
className="h-80 cursor-pointer perspective bg-glass-elevated rounded-lg border border-accent/20"
|
||||
className="h-80 cursor-pointer perspective"
|
||||
onClick={() => toggleFlip(member.id)}
|
||||
>
|
||||
<div
|
||||
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||
style={{
|
||||
transformStyle: "preserve-3d", transform: flipped[member.id]
|
||||
? "rotateY(180deg)"
|
||||
: "rotateY(0deg)"
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: flipped[member.id]
|
||||
? 'rotateY(180deg)'
|
||||
: 'rotateY(0deg)',
|
||||
}}
|
||||
>
|
||||
{/* Front Side */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
|
||||
className="absolute w-full h-full bg-white rounded-lg shadow-lg overflow-hidden flex flex-col items-center justify-center p-6"
|
||||
style={{
|
||||
backfaceVisibility: "hidden"
|
||||
backfaceVisibility: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div className="w-32 h-32 mb-4 rounded-full overflow-hidden bg-gray-200">
|
||||
<div className="w-32 h-32 mb-4 rounded-full overflow-hidden bg-gray-200 flex-shrink-0">
|
||||
<img
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
@@ -68,18 +69,21 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-center mt-2">{member.role}</p>
|
||||
<p className="text-sm text-gray-400 mt-4">Hover to see links</p>
|
||||
<p className="text-sm text-gray-400 mt-4 text-center">
|
||||
Hover to see social links
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Back Side */}
|
||||
<div
|
||||
className="absolute w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
|
||||
className="absolute w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg overflow-hidden flex flex-col items-center justify-center p-6"
|
||||
style={{
|
||||
backfaceVisibility: "hidden", transform: "rotateY(180deg)"
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)',
|
||||
}}
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-white mb-6 text-center">
|
||||
{member.name}
|
||||
Connect
|
||||
</h3>
|
||||
<div className="flex flex-col gap-4 w-full">
|
||||
{member.social.twitter && (
|
||||
@@ -89,8 +93,14 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
|
||||
>
|
||||
<span>𝕏</span>
|
||||
<span>Twitter</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2s9 5 20 5a9.5 9.5 0 00-9-5.5c4.75 2.25 9-1 9-5.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
|
||||
</svg>
|
||||
Twitter
|
||||
</a>
|
||||
)}
|
||||
{member.social.linkedin && (
|
||||
@@ -100,8 +110,15 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
|
||||
>
|
||||
<span>in</span>
|
||||
<span>LinkedIn</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z" />
|
||||
<circle cx="4" cy="4" r="2" />
|
||||
</svg>
|
||||
LinkedIn
|
||||
</a>
|
||||
)}
|
||||
{member.social.github && (
|
||||
@@ -111,8 +128,14 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
|
||||
>
|
||||
<span>⚙</span>
|
||||
<span>GitHub</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
)}
|
||||
{member.social.email && (
|
||||
@@ -120,8 +143,20 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
href={`mailto:${member.social.email}`}
|
||||
className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
|
||||
>
|
||||
<span>✉</span>
|
||||
<span>Email</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
Email
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
@@ -137,21 +172,39 @@ export default function Tag({ members = defaultMembers }: TagProps) {
|
||||
|
||||
const defaultMembers: TeamMember[] = [
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", role: "Lead Designer", image:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop", social: {
|
||||
twitter: "https://twitter.com", linkedin: "https://linkedin.com", email: "sarah@example.com"
|
||||
id: '1',
|
||||
name: 'Sarah Johnson',
|
||||
role: 'Lead Designer',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
|
||||
social: {
|
||||
twitter: 'https://twitter.com',
|
||||
linkedin: 'https://linkedin.com',
|
||||
email: 'sarah@example.com',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michael Chen", role: "Full Stack Developer", image:
|
||||
"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop", social: {
|
||||
github: "https://github.com", linkedin: "https://linkedin.com", email: "michael@example.com"
|
||||
id: '2',
|
||||
name: 'Michael Chen',
|
||||
role: 'Full Stack Developer',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
|
||||
social: {
|
||||
github: 'https://github.com',
|
||||
linkedin: 'https://linkedin.com',
|
||||
email: 'michael@example.com',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emma Rodriguez", role: "Product Manager", image:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop", social: {
|
||||
twitter: "https://twitter.com", linkedin: "https://linkedin.com", email: "emma@example.com"
|
||||
id: '3',
|
||||
name: 'Emma Rodriguez',
|
||||
role: 'Product Manager',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
|
||||
social: {
|
||||
twitter: 'https://twitter.com',
|
||||
linkedin: 'https://linkedin.com',
|
||||
email: 'emma@example.com',
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user