export default function Example() {
  const StyledContent = styled(Tabs.Content, {
    minHeight: "50px",
    paddingTop: "20px",
    color: theme.colors.primary,
  return (
          display: "flex",
          width: 500,
          rowGap: "$100",
          flexDirection: "column",
        <Tabs.Root defaultValue="tab1">
          <Tabs.List aria-label="Countries' information">
            <Tabs.Trigger value="tab1">
              <Icon label="trigger icon" size="100">
                <Info />
            <Tabs.Trigger value="tab2">Brazil</Tabs.Trigger>
            <Tabs.Trigger value="tab3">
              <Icon label="trigger icon" size="100">
                <Info />
              The Democratic Republic of the Congo
            <Tabs.Trigger value="tab4">Vietnam</Tabs.Trigger>
            <Tabs.Trigger value="tab5">Papua New Guinea</Tabs.Trigger>
            <Tabs.Trigger value="tab6">Venezuela</Tabs.Trigger>
            <Tabs.Trigger value="tab7">Kenya</Tabs.Trigger>
            <Tabs.Trigger value="tab8">Austria</Tabs.Trigger>
          <StyledContent value="tab1">France is here 🇫🇷</StyledContent>
          <StyledContent value="tab2">Brazil is here 🇧🇷</StyledContent>
          <StyledContent value="tab3">
            The Democratic Republic of the Congo is here 🇨🇩
          <StyledContent value="tab4">Vietnam is here 🇻🇳</StyledContent>
          <StyledContent value="tab5">
            Papua New Guinea is here 🇵🇬
          <StyledContent value="tab6">Venezuela is here 🇻🇪</StyledContent>
          <StyledContent value="tab7">Kenya is here 🇰🇪</StyledContent>
          <StyledContent value="tab8">Austria is here 🇦🇹</StyledContent>