github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/CallToActions/index.tsx (about)

     1  import { getComponent } from "../dashboards";
     2  
     3  const items = [
     4    {
     5      title: "Find a Dashboard",
     6      description:
     7        "Steampipe Hub has hundreds of open source dashboards to get you started.",
     8      href: "https://hub.steampipe.io/mods",
     9      withReferrer: true,
    10    },
    11    {
    12      title: "Build a Dashboard",
    13      description:
    14        "It's easy to create your own dashboard as code! Start with this tutorial.",
    15      href: "https://steampipe.io/docs/mods/writing-dashboards",
    16      withReferrer: true,
    17    },
    18    {
    19      title: "Join our Community",
    20      description:
    21        "Connect directly with Steampipe users and the development team in Slack.",
    22      href: "https://steampipe.io/community/join",
    23      withReferrer: true,
    24    },
    25  ];
    26  
    27  const CallToActions = () => {
    28    const ExternalLink = getComponent("external_link");
    29    return (
    30      <ul className="mt-4 md:mt-0 space-y-6">
    31        {items.map((item, itemIdx) => (
    32          <li key={itemIdx} className="flow-root">
    33            <div className="p-3 flex items-center space-x-4 rounded-md hover:bg-dashboard-panel focus-within:ring-2 focus-within:ring-blue-500">
    34              <ExternalLink
    35                className="focus:outline-none"
    36                ignoreDataMode
    37                to={item.href}
    38                withReferrer={item.withReferrer}
    39              >
    40                <span className="text-foreground">
    41                  <>{item.title}</>
    42                  <span aria-hidden="true" className="ml-1">
    43                    &rarr;
    44                  </span>
    45                </span>
    46                <p className="mt-1 text-sm text-foreground-light">
    47                  {item.description}
    48                </p>
    49              </ExternalLink>
    50            </div>
    51          </li>
    52        ))}
    53      </ul>
    54    );
    55  };
    56  
    57  export default CallToActions;