<!-- New Year countdown -->
<arc-countdown-timer
  target="2026-12-31T00:00:00"
  label="New Year"
></arc-countdown-timer>

<!-- Product launch with custom expired text -->
<arc-countdown-timer
  target="2026-06-15T09:00:00"
  label="Launches In"
  expired="Now Live!"
></arc-countdown-timer>

<!-- Short countdown, hiding zero segments -->
<arc-countdown-timer
  target="2026-03-01T18:00:00"
  hide-zero-segments
></arc-countdown-timer>

import { CountdownTimer } from '@arclux/arc-ui-react';

function LaunchBanner({ launchDate }) {
  return (
    <CountdownTimer
      target={launchDate}
      label="Launches In"
      expired="Now Live!"
      onArcExpired={() => console.log('Countdown finished!')}
    />
  );
}

<script setup>
import { CountdownTimer } from '@arclux/arc-ui-vue';

const launchDate = '2026-12-31T00:00:00';

function handleExpired() {
  console.log('Countdown finished!');
}
</script>

<template>
  <CountdownTimer
    :target="launchDate"
    label="New Year"
    expired="Happy New Year!"
    @arc-expired="handleExpired"
  />
</template>

<script>
  import { CountdownTimer } from '@arclux/arc-ui-svelte';

  const target = '2026-12-31T00:00:00';
</script>

<CountdownTimer
  {target}
  label="New Year"
  expired="Happy New Year!"
  on:arc-expired={() => console.log('Done!')}
/>

import { Component } from '@angular/core';
import { CountdownTimer } from '@arclux/arc-ui-angular';

@Component({
  imports: [CountdownTimer],
  template: `
    <CountdownTimer
      target="2026-12-31T00:00:00"
      label="New Year"
      expired="Happy New Year!"
      (arc-expired)="onExpired()"
    />
  `,
})
export class CountdownComponent {
  onExpired() {
    console.log('Countdown finished!');
  }
}

import { CountdownTimer } from '@arclux/arc-ui-solid';

function LaunchCountdown() {
  return (
    <CountdownTimer
      target="2026-12-31T00:00:00"
      label="New Year"
      expired="Happy New Year!"
    />
  );
}

import { CountdownTimer } from '@arclux/arc-ui-preact';

function LaunchCountdown() {
  return (
    <CountdownTimer
      target="2026-12-31T00:00:00"
      label="New Year"
      expired="Happy New Year!"
    />
  );
}