Lab

<script setup lang="ts">
import { twMerge } from "tailwind-merge";

const props = defineProps({
  code: {
    type: String,
    default: "",
  },
  class: {
    type: String,
    default: null,
  },
});

const { copy, copied } = useClipboard();

const isExpanded = shallowRef(false);
const preElementRef = useTemplateRef("pre-element");
const maxHeight = shallowRef("480px");

watch(preElementRef, (element) => {
  if (!element) return;

  if (element.scrollHeight <= 480) {
    maxHeight.value = "auto";
  }
});

const toggleExpand = (element: HTMLPreElement) => {
  maxHeight.value = isExpanded.value
    ? "480px"
    : `${element.scrollHeight + 24}px`; // Add 24px to account for padding
  useToggle(isExpanded)();
};

const isCollapsible = computed(
  () => preElementRef.value && preElementRef.value.scrollHeight > 480,
);
</script>

<template>
  <div class="relative space-y-4">
    <UiButton @click="copy($props.code)">
      <PhosphorIcon
        :name="{ clipboard: !copied, 'clipboard-text': copied }"
        size="20"
        weight="duotone"
      />
      {{ copied ? "Copied" : "Copy" }}
    </UiButton>

    <div
      class="ease-in-out-circ group relative cursor-pointer overflow-hidden rounded-xl border p-3 backdrop-blur-md transition-all duration-300"
      :style="{ maxHeight }"
      @click="isCollapsible && preElementRef && toggleExpand(preElementRef)"
    >
      <pre
        ref="pre-element"
        :class="[
          'text-sm text-wrap',
          twMerge(
            isCollapsible &&
              !isExpanded &&
              'transition-opacity hover:opacity-80',
            $props.class as string | undefined,
          ),
        ]"
      ><slot /></pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { createAnimatable } from "animejs/animatable";

const isElementSnappable = (element: Element | null) =>
  element?.closest("[data-snap-cursor]") !== null;

const ANIMATION_DURATION = 300;

const cursorSprite = useTemplateRef("cursor-sprite");
const cursorSpriteAnimatable = computed(() => {
  if (!cursorSprite.value) return null;

  return createAnimatable(cursorSprite.value, {
    x: ANIMATION_DURATION,
    y: ANIMATION_DURATION,
    scale: ANIMATION_DURATION,
    opacity: ANIMATION_DURATION,
    ease: "out(3)",
  }) as any;
});

const { x, y, pointerType } = usePointer();
watch([x, y, pointerType], ([newX, newY, newPointerType]) => {
  if (!cursorSpriteAnimatable.value) return;
  else if (newPointerType !== "mouse") return;

  // elementFromPoint uses viewport-relative coordinates
  const currentElement = document.elementFromPoint(newX, newY);
  const shouldSnap = isElementSnappable(currentElement);

  cursorSpriteAnimatable.value.scale(shouldSnap ? 0 : 1);
  cursorSpriteAnimatable.value.opacity(shouldSnap ? 0 : 1);

  // Position uses page-relative coordinates to account for scrolling
  cursorSpriteAnimatable.value.x(newX + window.pageXOffset - 40);
  cursorSpriteAnimatable.value.y(newY + window.pageYOffset - 40);
});
</script>

<template>
  <div
    class="absolute -z-10 aspect-square h-20 rounded-full border border-dashed opacity-0"
    ref="cursor-sprite"
  />
</template>

<script setup lang="ts">
interface Position {
  x: number;
  y: number;
}

interface SpotlightCardProps {
  className?: string;
  spotlightColor?: string;
}

const { className = "", spotlightColor = "rgba(255, 255, 255, 0.5)" } =
  defineProps<SpotlightCardProps>();

const spotlightCardRef = useTemplateRef("spotlight-card");
const isFocused = shallowRef(false);
const position = shallowRef<Position>({ x: 0, y: 0 });
const opacity = shallowRef(0);

const handleMouseMove = (event: MouseEvent) => {
  if (!spotlightCardRef.value || isFocused.value) return;

  const rect = spotlightCardRef.value.getBoundingClientRect();
  position.value = {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  };
};

const handleFocus = () => {
  isFocused.value = true;
  opacity.value = 0.6;
};

const handleBlur = () => {
  isFocused.value = false;
  opacity.value = 0;
};

const handleMouseEnter = () => {
  opacity.value = 0.6;
};

const handleMouseLeave = () => {
  opacity.value = 0;
};
</script>

<template>
  <div
    ref="spotlight-card"
    @mousemove="handleMouseMove"
    @focus="handleFocus"
    @blur="handleBlur"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    :class="['relative overflow-hidden rounded-3xl border p-8', className]"
  >
    <div
      class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out"
      :style="{
        opacity,
        background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
      }"
    />

    <slot />
  </div>
</template>