<TExpandable label="Toggle me" py="md" px>
  <TText size="sm" py="sm">
    It is a long established fact that a reader will be distracted by the readable content.
  </TText>
</TExpandable>

<TCard class="overflow-hidden" design="flat">
  <TExpandable
    status={true}
    color="primary"
    icon={() => <TIcon icon="mdi:account" size="20" />}
    label={() => <TText color="primary">Account</TText>}
    sublabel={() => <TText size="sm">A fact that a reader will be distracted.</TText>}
    py="md"
    px="lg"
  >
    <TCard design="flat" p>
      <TText size="sm" leading="snug">
        It is a long established fact that a reader will be distracted by the readable content.
      </TText>
    </TCard>
  </TExpandable>
  <TDivider />
  ...
</TCard>

export default defineComponent({
  setup() {
    const status = ref(false);
    const disabled = ref(false);

    const onStatusToggle = () => {
      status.value = !status.value;
    };

    const onDisabledToggle = () => {
      disabled.value = !disabled.value;
      status.value = false;
    };

    return () => (
      <>
        <TFlex>
          <TButton design="flat" me="sm" onClick={onStatusToggle}>
            {status.value ? "Close" : "Open"}
          </TButton>
          <TButton design="flat" onClick={onDisabledToggle}>
            {disabled.value ? "Enable" : "Disable"}
          </TButton>
        </TFlex>

        <TDivider my="xl" />

        <TExpandable
          status={status.value}
          disabled={disabled.value}
          icon="mdi:account-circle"
          design={status.value ? "flat" : "raised"}
          elevated={!status.value}
          actions={() => (
            <TBadge
              design="raised"
              color="surface"
              textColor="success"
              value="24"
              me="sm"
              inline //
            />
          )}
          onChange={(value) => (status.value = value)}
          label="Photos Gallery"
          color="success"
          size="lg"
          py="lg"
          px="lg"
          rounded
        >
          <TCell pt="sm">
            <TGrid cols="3" gap="2">
              <TCard class="overflow-hidden" design="flat" size="lg" ratio="1">
                <TImage src="https://source.unsplash.com/500x500/?newyork" />
              </TCard>
              <TCard class="overflow-hidden" design="flat" size="lg" ratio="1">
                <TImage src="https://source.unsplash.com/500x500/?dubai" />
              </TCard>
              <TCard class="overflow-hidden" design="flat" size="lg" ratio="1">
                <TImage src="https://source.unsplash.com/500x500/?london" />
              </TCard>
            </TGrid>
          </TCell>
        </TExpandable>
      </>
    );
  },
});