Typography

  import { Title } from "@xbeshui/core"
  export function TypographyDemoH1() {
    return (
      <Title order={'h1'} className="leading-12">
        This is h1 title
      </Title>
    )
  }

  import { Title } from "@xbeshui/core"
  export function TypographyDemoH2() {
    return (
      <Title order={'h2'} className="leading-12">
        This is h2 title
      </Title>
    )
  }

  import { Title } from "@xbeshui/core"
  export function TypographyDemoH3() {
    return (
      <Title order={'h3'} className="leading-12">
        This is h3 title
      </Title>
    )
  }

  import { Title } from "@xbeshui/core"
  export function TypographyDemoH4() {
    return (
      <Title order={'h4'} className="leading-12">
        This is h4 title
      </Title>
    )
  }

  import { Title } from "@xbeshui/core"
  export function TypographyDemoH5() {
    return (
      <Title order={'h5'} className="leading-12">
        This is h5 title
      </Title>
    )
  }

  import { Title } from "@xbeshui/core"
  export function TypographyDemoH6() {
    return (
      <Title order={'h6'} className="leading-12">
        This is h6 title
      </Title>
    )
  }

  import { Text } from "@xbeshui/core"
  export function TypographyDemoH6() {
    return (
      <Text size={"sm"} textWrap={"wrap"} line={"7xl"} fontFamily={"sans"} align={"center"} textOverflow={"truncate"} lineClamp={"clamp7"}>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </Text>
    )
  }

  import { BlockQuote } from '@xbeshui/core';
  import { IconAlertCircle } from '@tabler/icons-react';
 
  function Demo() {
    return (
      <BlockQuote cite="Nelson Mandela" icon={<IconAlertCircle />}>
        The greatest glory in living lies not in never falling, but in rising
        every time we fall.
      </BlockQuote>
    );
  }

  import { List } from '@xbeshui/core';
 
  function Demo() {
    return (
      <List position={"inside"} type={"disc"} fontSize={"lg"} className="text-left">
        <List.Item>Clone or download repository from GitHub</List.Item>
        <List.Item>Install dependencies with yarn</List.Item>
        <List.Item>To start development server run npm start command</List.Item>
        <List.Item>Run tests to make sure your changes do not break the build</List.Item>
        <List.Item>Submit a pull request once you are done</List.Item>
      </List>
    );
  }    

  import { Code } from '@xbeshui/core';
 
  export function CodeDemo(){
    return (
      <Code>
        {`import { useState } from 'react';
          function SearchableVideoList({ videos }) {
            const [searchText, setSearchText] = useState('');
            const foundVideos = filterVideos(videos, searchText);
            return (
              <>
                <VideoList videos={foundVideos}
              </>
            );
          }`}
      </Code>
    );
  }

   import { XbTable } from '@xbeshui/core';
 
function Demo() {
  const data = [
      { id: 1, name: "John Doe", role: "Developer", city: "delhi", country: "india" },
      { id: 2, name: "Jane Doe", role: "Designer", city: "up" },
      { id: 3, name: "Alice Smith", role: "Manager", city: "haryana" },
      { id: 4, name: "Bob Johnson", role: "Engineer", city: "mumbai" },
      { id: 5, name: "Eve Wilson", role: "Analyst", city: "bangalore" },
      { id: 6, name: "Charlie Brown", role: "Consultant", city: "chennai" },
      { id: 7, name: "Grace Lee", role: "Coordinator", city: "kolkata" },
      { id: 8, name: "David Clark", role: "Administrator", city: "pune" },
      { id: 9, name: "Sarah Davis", role: "Supervisor", city: "ahmedabad" },
      { id: 10, name: "Michael Martinez", role: "Specialist", city: "hyderabad" },
      { id: 11, name: "Linda Garcia", role: "Technician", city: "jaipur" },
      { id: 12, name: "Peter Adams", role: "Coordinator", city: "lucknow" },
      { id: 13, name: "Jennifer Baker", role: "Analyst", city: "patna" },
      { id: 14, name: "Tom Wilson", role: "Manager", city: "nagpur" },
      { id: 15, name: "Jessica Perez", role: "Developer", city: "chandigarh" },
      { id: 16, name: "Mark Taylor", role: "Designer", city: "surat" },
      { id: 17, name: "Karen Lopez", role: "Engineer", city: "kanpur" },
      { id: 18, name: "Steven Young", role: "Consultant", city: "jaipur" },
      { id: 19, name: "Anna Harris", role: "Administrator", city: "ahmedabad" },
      { id: 20, name: "Robert Wright", role: "Supervisor", city: "hyderabad" },
  ];
  return (
      <XbTable data={data} borderCollapse={"default"}  withPagination itemsPerPage={10} />
  );
}