class=class="text-blue-400">"text-muted-foreground">// Built by Dhirender Choudhary
class=class="text-blue-400">"text-muted-foreground">// use pnpm
import React, { useState } from 'react';
import { GitHubCalendar } from 'react-github-calendar';
export default function CalendarPreview() {
  const [tip, setTip] = useState(null);
  const blockSize = 12;
  const blockMargin = 4;
  const radius = (0 / 50) * (blockSize / 2);
  const shapeRadius = radius;
  return (
    class="text-green-400"><div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      class="text-green-400"><h2 style={{ fontSize: '1rem', fontWeight: 600, margin: 0 }}>Contributionsclass="text-green-400"></h2>
      class="text-green-400"><GitHubCalendar
        username="torvalds"
        theme={{ dark: ['#1a0a00', '#4a1500', '#8b3a00', '#cc6600', '#ff9933'] }}
        blockSize={blockSize}
        blockMargin={blockMargin}
        hideTotalCount={false}
        hideColorLegend={false}
      labels={{
        totalCount: '{{count}} contributions in {{year}}',
      }}
        renderBlock={(block, activity) => {
          const { x, y, width, height, ...restProps } = block.props;
          const nx = Number(x);
          const ny = Number(y);
          const s = Number(width);
          const cx = nx + s / 2;
          const cy = ny + s / 2;
          let shapeElement;
          shapeElement = class="text-green-400"><rect x={nx} y={ny} width={s} height={s} rx={shapeRadius} ry={shapeRadius} {...restProps} />;
          return React.cloneElement(shapeElement, {
            onMouseEnter: (e) => {
              const r = e.currentTarget.getBoundingClientRect();
              setTip({
                x: r.left + r.width / 2,
                y: r.top - 8,
                count: activity.count,
                date: activity.date,
              });
            },
            onMouseLeave: () => setTip(null)
          });
        }}
      />
      {tip && (
        class="text-green-400"><div style={{ position: 'fixed', left: tip.x + 'px', top: tip.y + 'px', transform: 'translate(-50%, -100%)', background: '#0d1117', color: '#c9d1d9', padding: '6px 10px', borderRadius: '6px', fontSize: '11px', pointerEvents: 'none', zIndex: 1000 }}>
          {tip.count} contributions on {tip.date}
        class="text-green-400"></div>
      )}
    class="text-green-400"></div>
  );
}