<commit_before>import * as React from 'react';
import clsx from 'clsx';
import { useTwitchStreams } from '~/lib/twitch-api';

export interface LiveStreamStatusProps extends React.ComponentPropsWithoutRef<'div'> {
  username?: string;
}

export const LiveStreamStatus = React.forwardRef<HTMLDivElement, LiveStreamStatusProps>(
  ({ className, style, username = 'resir014', ...rest }, ref) => {
    const { data } = useTwitchStreams(username);

    const gameTitle = data?.game_name ?? undefined;
    const viewCount = data ? Intl.NumberFormat('en-GB').format(data.viewer_count) : undefined;

    return (
      <div
        className={clsx(
          'flex items-center space-x-4 relative leading-tight bg-chungking-grey-800 px-4 py-2 rounded-md shadow-single',
          className
        )}
        style={style}
        ref={ref}
        {...rest}
      >
        <div className="flex items-center space-x-2">
          <div
            className={clsx('w-3 h-3 rounded-full', data ? 'bg-red-500' : 'bg-chungking-grey-500')}
            aria-hidden
          />
          <span className="font-semibold text-chungking-white">{data ? 'Online' : 'Offline'}</span>
        </div>
        <a
          className="helper-link-cover text-chungking-grey-300"
          href={`https://www.twitch.tv/${username}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          {data
            ? `Streaming ${gameTitle} for ${viewCount} viewers`
            : 'Follow to be notified when I go live!'}
        </a>
      </div>
    );
  }
);

LiveStreamStatus.displayName = 'LiveStreamStatus';
<commit_msg>fix live status widget for smaller screens (#234)<commit_after>import * as React from 'react';
import clsx from 'clsx';
import { useTwitchStreams } from '~/lib/twitch-api';

export interface LiveStreamStatusProps extends React.ComponentPropsWithoutRef<'div'> {
  username?: string;
}

export const LiveStreamStatus = React.forwardRef<HTMLDivElement, LiveStreamStatusProps>(
  ({ className, style, username = 'resir014', ...rest }, ref) => {
    const { data } = useTwitchStreams(username);

    const gameTitle = data?.game_name ?? undefined;
    const viewCount = data ? Intl.NumberFormat('en-GB').format(data.viewer_count) : undefined;

    return (
      <div
        className={clsx(
          'flex flex-col lg:flex-row items-start lg:items-center space-y-1 lg:space-y-0 lg:space-x-4 relative',
          'leading-tight bg-chungking-grey-800 px-4 py-2 rounded-md shadow-single',
          className
        )}
        style={style}
        ref={ref}
        {...rest}
      >
        <div className="flex items-center space-x-2">
          <div
            className={clsx('w-3 h-3 rounded-full', data ? 'bg-red-500' : 'bg-chungking-grey-500')}
            aria-hidden
          />
          <span className="font-semibold text-chungking-white">{data ? 'Online' : 'Offline'}</span>
        </div>
        <a
          className="helper-link-cover text-chungking-grey-300"
          href={`https://www.twitch.tv/${username}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          {data
            ? `Streaming ${gameTitle} for ${viewCount} viewers`
            : 'Follow to be notified when I go live!'}
        </a>
      </div>
    );
  }
);

LiveStreamStatus.displayName = 'LiveStreamStatus';

{'fraction_non_alphanumeric': 0.14132058559904392, 'fraction_numerical': 0.014042426053181954, 'mean_word_length': 2.4373716632443534, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3293227', 'n_tokens_mistral': 1062, 'n_tokens_neox': 1023, 'n_words': 218}