🪟 React Browser Components ✨

  import { ArcBrowser } from "react-browser-components";
  import { useState } from "react";
  
  function ArcBrowserWithTabs() {
    const [tab, setTab] = useState(0);
    return (
      <div style={{ width: "640px", height: "480px" }}>
        <ArcBrowser
          tabs={tabs}
          tab={tab}
          setTab={setTab}
        />
      </div>
    ); // by default, browser fills it's parent element
  };
  
  // ====== tabs =========
  
  const tabs = [
    {
      name: "Example",
      link: "https://example.com",
      content: (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "100%",
            height: "100%",
          }}
        >
          👋🏻 Welcome to React Browser Containers!
        </div>
      ),
      icon: (
        <div
          style={{
            width: "100%",
            height: "100%",
            backgroundColor: "#3C82F6",
            borderRadius: "50%",
          }}
        />
      ),
    },
    {
      name: "Click me!",
      link: "https://example.com",
      content: (
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "100%",
            height: "100%",
          }}
        >
          ✨ With tabs functionality!
        </div>
      ),
      icon: (
        <div
          style={{
            width: "100%",
            height: "100%",
            backgroundColor: "#E45549",
            borderRadius: "50%",
          }}
        />
      ),
    },
  ];