Preview:
import type { NextPage } from "next";
import Head from "next/head";
import { Tabs } from "antd";
import ButtonComponent from "components/ButtonComponent";
import BadgeComponent from "components/BadgeComponent";
import ChecboxComponent from "components/ChecboxComponent";

const Home: NextPage = () => {
  return (
    <div className="container">
      <Head>
        <title>Latihan Antd Custom Varibale</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="main">
        <Tabs defaultActiveKey="1">
          <Tabs.TabPane tab="Komponen Button" key="1">
            <ButtonComponent />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Komponen Badge" key="2">
            <BadgeComponent />
          </Tabs.TabPane>
          <Tabs.TabPane tab="Komponen Checkbox" key="3">
            <ChecboxComponent />
          </Tabs.TabPane>
        </Tabs>
      </main>
    </div>
  );
};

export default Home;
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter