import { useState } from 'react' export default function App() { return ( <main className="relative flex min-h-screen w-full items-center justify-center bg-white px-4 py-10"> <ClockTeam /> </main> ) } interface TeamMember { name: string location: string time: string timeShift: number } const teamMembers: TeamMember[] = [ { name: 'LN', location: 'Douala, Cameroon', time: '01:45', timeShift: +3 }, { name: 'Kumail', location: 'Toronto, Canada', time: '23:38', timeShift: -4 }, { name: 'Ethan', location: 'San Francisco, USA', time: '13:12', timeShift: 0, }, { name: 'Isabella', location: 'Toronto, Canada', time: '19:12', timeShift: -6, }, { name: 'Liam', location: 'London, UK', time: '05:41', timeShift: +1 }, ] export const ClockTeam = () => { const [currentTime, setCurrentTime] = useState('12:14') const handleMouseOver = (time: string) => { setCurrentTime(time) } return ( <div className="flex w-full flex-col overflow-hidden rounded-3xl border shadow-sm md:max-w-2xl md:flex-row"> <div className="flex w-full flex-col items-center bg-white md:w-1/2"> <div className="flex w-full items-center justify-start gap-2 p-8"> <h2 className="text-2xl font-semibold">Team</h2> <p className="flex items-center justify-start gap-2"> <span className="block h-2 w-2 rounded-full bg-green-500"></span>{' '} <span className="text-xs text-gray-500">5 online</span> </p> </div> <div className="relative flex h-full w-full items-center justify-center pb-8"> <Clock time={currentTime} /> </div> </div> <div className="flex w-full flex-col items-center justify-center gap-3 bg-slate-50/50 p-4 md:w-1/2"> {teamMembers.map((member) => ( <button key={member.name} className="group flex w-full cursor-pointer items-start gap-3 rounded-lg p-2 transition-colors duration-300 hover:bg-gray-100" onMouseOver={() => handleMouseOver(member.time)} onMouseOut={() => handleMouseOver('12:14')} > <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-2"> <img src={`https://api.dicebear.com/9.x/notionists-neutral/svg?seed=${member.name}`} alt={member.name} className="h-full w-full bg-white object-cover transition-transform duration-300 ease-in-out group-hover:scale-110" /> </div> <div className="flex flex-1 flex-col items-start"> <div className="text-md text-left font-medium">{member.name}</div> <div className="text-left text-sm text-gray-500"> {member.location} </div> </div> <div className="flex h-5 flex-col items-end overflow-hidden text-sm font-medium text-gray-500"> <span className="block transition-transform duration-300 ease-in-out group-hover:-translate-y-5"> {member.time} </span> <span className="transition-transform duration-300 ease-in-out group-hover:-translate-y-5" style={{ color: member.timeShift === 0 ? '#6b7280' : member.timeShift > 0 ? 'green' : 'red', }} > {member.timeShift === 0 ? 'No change' : `${member.timeShift > 0 ? '+' : ''}${ member.timeShift } hours`} </span> </div> </button> ))} </div> </div> ) } interface ClockProps { time: string } const Clock: React.FC<ClockProps> = ({ time }) => { const [hour, minute] = time.split(':').map(Number) const dialLines = Array.from({ length: 60 }).map((_, i) => ({ transform: `rotate(${6 * (i + 1)}deg)`, })) return ( <div className="relative h-[280px] w-[280px] rounded-full border-0"> <div className="absolute h-full w-full"> <div className="hour-hand duration-300" style={{ transform: `translateX(-50%) rotate(${ (hour % 12) * 30 + minute / 2 }deg) `, }} ></div> <div className="minute-hand duration-300" style={{ transform: `translateX(-50%) rotate(${minute * 6}deg)`, }} ></div> <div className="second-hand duration-300" style={ { //transform: `translateX(-50%) rotate(${new Date().getSeconds() * 6}deg)`, } } ></div> </div> <div className="absolute h-full w-full"> {dialLines.map((style, index) => ( <div key={index} className="dialline" style={style}></div> ))} </div> <div className="absolute bottom-12 left-1/2 -translate-x-1/2"> <span className="text-2xl font-medium text-gray-500">{hour}</span> <span className="text-2xl font-medium text-gray-500">:</span> <span className="text-2xl font-medium text-gray-500">{minute}</span> </div> </div> ) }

Remote Team Clock

Code

Stacks

Inspiration

X ( Twitter ) Post