bender/361ef7c8-e440-4345-8c04-cbfafb8c8596
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/tag/Tag.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 13:19:12 +00:00
parent 23c2a46915
commit d824113557
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/tag/Tag.tsx
View File

@@ -1,7 +1,6 @@
"use client";
import { useState } from "react";
import { getCardStyleClasses } from '@/utils/designTokens';
interface TeamMember {
id: string;
@@ -40,7 +39,7 @@ export default function Tag({ members = defaultMembers }: TagProps) {
{members.map((member) => (
<div
key={member.id}
className={`h-80 cursor-pointer perspective ${getCardStyleClasses('glass-elevated')}`}
className="h-80 cursor-pointer perspective bg-glass-elevated rounded-lg border border-accent/20"
onClick={() => toggleFlip(member.id)}
>
<div
@@ -48,13 +47,15 @@ export default function Tag({ members = defaultMembers }: TagProps) {
style={{
transformStyle: "preserve-3d", transform: flipped[member.id]
? "rotateY(180deg)"
: "rotateY(0deg)"}}
: "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"
style={{
backfaceVisibility: "hidden"}}
backfaceVisibility: "hidden"
}}
>
<div className="w-32 h-32 mb-4 rounded-full overflow-hidden bg-gray-200">
<img
@@ -74,7 +75,8 @@ export default function Tag({ members = defaultMembers }: TagProps) {
<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"
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}
@@ -137,16 +139,19 @@ 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"},
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"},
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"},
twitter: "https://twitter.com", linkedin: "https://linkedin.com", email: "emma@example.com"
},
},
];