Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 9x 26x 26x 26x 26x | import React from 'react';
export const ClockIcon = React.memo(function ClockIcon({ date }: { date: Date }) {
const hours = date.getHours();
const minutes = date.getMinutes();
const hourAngle = (hours % 12) * 30 + minutes * 0.5;
const minuteAngle = minutes * 6;
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
className="w-5 h-5 text-indigo-500 flex-shrink-0"
aria-hidden="true"
>
<circle cx="12" cy="12" r="9" />
<line
x1="12"
y1="12"
x2={12 + 3.5 * Math.sin((Math.PI / 180) * hourAngle)}
y2={12 - 3.5 * Math.cos((Math.PI / 180) * hourAngle)}
/>
<line
x1="12"
y1="12"
x2={12 + 5.5 * Math.sin((Math.PI / 180) * minuteAngle)}
y2={12 - 5.5 * Math.cos((Math.PI / 180) * minuteAngle)}
/>
</svg>
);
});
|