colors: {
        tbg: '#fffff8',
      },

        'preview': '40rem auto',

        'fadein-slow': 'fade-1-5 1s ease-in-out 1',

        }

        },
        'fade-1-5': {
          '0%': { opacity: 0 },
          '20%': { opacity: 0 },
          '100%': { opacity: 1 },
        },

      margin: ['last']

      margin: ['first', 'last']

import Preview from './Preview';

  let underdata = null;
  if(url && !vars) {
    underdata = <div>Unable to parse URL. Make sure you're using a valid URL. For example: <Samples onClick={setUrl} /></div>;
  } else if (data) {
    underdata = <TagList tags={data.guildId} queryData={vars!} onClick={setUrl} />;
  }

      {(url && !vars) ? <div className="mt-5">Unable to parse URL. Make sure you're using a valid URL. For example: <Samples onClick={setUrl} /></div> : null}
      {data ? <TagList tags={data.guildId} queryData={vars!} onClick={setUrl} /> : null}
      {!url && <Changelog />}

      <div className="mt-5" style={{minHeight: 120}}>
        {underdata}
      </div>
      <div className="animate-fadein-slow">
        <Preview />
        <Changelog />
      </div>

import React from 'react';
import { Region, ZONE_ENCOUNTERS } from './model';
import { TeamOverview, StatTable } from './Details';
import EncounterOverview from './EncounterOverview';
function PreviewGradient({ to }: { to: 't' | 'tr' | 'tl'; }) {
  return <div className={`w-full h-1/2 bg-gradient-to-${to} from-tbg absolute left-0 bottom-0`}></div>;
}
function PreviewCard({ title, desc, children, flip, previewClass, gradientTo }: React.PropsWithChildren<{ title: string; desc: string; flip?: boolean; previewClass?: string; gradientTo?: 't' | 'tr' | 'tl'; }>) {
  return (
    <section className="first:mt-10 mt-20">
      <div className="grid grid-cols-preview gap-10 grid-flow-col-dense">
        <div className={`w-3/4 text-lg ${flip ? 'col-start-2 justify-self-end mr-10' : 'col-start-1 justify-self-start'}`}>
          <header><legend className="text-3xl font-serif">{title}</legend></header>
          <p dangerouslySetInnerHTML={{__html: desc}} />
        </div>
        <div className={`overflow-hidden relative ${flip ? 'col-start-1' : 'col-start-2'} ${previewClass || 'max-h-52'}`}>
          {children}
          <PreviewGradient to={gradientTo || 't'} />
        </div>
      </div>
    </section>
  );
}
const TEAM = 14078;
const TIER = 26;
export default function Preview() {
  return (
    <div className="mb-5">
      <PreviewCard title="See Your Progression in New Light" desc="We collect and aggregate data about Mythic progression on each boss as you progress. See detailed data about pull count, time spent on progression, hotfixes, and a night-by-night breakdown of your progress on a boss!" previewClass="max-h-72" gradientTo="tl">
        <EncounterOverview region={Region.NA} encounterId={2399} difficulty={5} team={TEAM} />
      </PreviewCard>
      <PreviewCard title="Get a Detailed Overview of the Tier" desc="In addition to our encounter-level breakdowns, we succinctly collate your progression data from the entire tier. This allows you to easily make macro-level comparisons to other raid teams, determine where you excelled and identify where you still need improvement.">
        <StatTable encounters={ZONE_ENCOUNTERS[TIER]} team={TEAM} difficulty={5} />
      </PreviewCard>
      <PreviewCard title="View Accurate Raid Time Data" desc="We automatically calculate raid times from guilds' progression logs, letting you know whether a guild is really that 2 night dream or one report away from the Overtime Police.<br/><br/><small><em>This feature is still a work in progress. Please report any inaccuracies you find.</em></small>" previewClass="max-h-32">
        <TeamOverview team={TEAM} zone={TIER} encounters={ZONE_ENCOUNTERS[TIER]} region={Region.NA} />
      </PreviewCard>
    </div>
  );
}

function StatTable({ difficulty, team, encounters }: { team: number; encounters: number[]; difficulty: number; }) {

export function StatTable({ difficulty, team, encounters }: { team: number; encounters: number[]; difficulty: number; }) {

function TeamOverview(props: { team: number; zone: number; encounters: number[]; region: Region; }) {

export function TeamOverview(props: { team: number; zone: number; encounters: number[]; region: Region; }) {

    <section className="mt-5">

    <section className="mt-10 mb-10" id="recent-changes">