chore: nice download options btn
This commit is contained in:
0xSage
parent
e09f804e12
commit
3cb94fa52e
@ -17,6 +17,7 @@
|
||||
"@docusaurus/core": "2.4.1",
|
||||
"@docusaurus/preset-classic": "2.4.1",
|
||||
"@docusaurus/theme-live-codeblock": "^2.4.1",
|
||||
"@headlessui/react": "^1.7.17",
|
||||
"@heroicons/react": "^2.0.18",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"autoprefixer": "^10.4.16",
|
||||
|
||||
67
docs/src/components/Elements/dropdown.js
Normal file
67
docs/src/components/Elements/dropdown.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
import { Fragment } from "react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
|
||||
const items = [
|
||||
{ name: "Download for Mac (Intel)", href: "#" },
|
||||
{ name: "Download for Windows", href: "#" },
|
||||
{ name: "Download for Linux", href: "#" },
|
||||
];
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
}
|
||||
|
||||
export default function Dropdown() {
|
||||
return (
|
||||
<div className="inline-flex">
|
||||
<button
|
||||
type="button"
|
||||
className="cursor-pointer relative inline-flex items-center rounded-l-md border-0 px-3.5 py-2.5 text-base font-semibold text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400"
|
||||
>
|
||||
<img
|
||||
src={require("@site/static/img/apple-logo-white.png").default}
|
||||
alt="Logo"
|
||||
className="h-5 mr-3 -mt-1"
|
||||
/>
|
||||
Download for Mac (Silicon)
|
||||
</button>
|
||||
<Menu as="div" className="relative -ml-px block">
|
||||
<Menu.Button className="cursor-pointer relative inline-flex items-center rounded-r-md border-0 border-l border-gray-300 h-12 text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400">
|
||||
<span className="sr-only">Open OS options</span>
|
||||
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 z-10 -mr-1 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{items.map((item) => (
|
||||
<Menu.Item key={item.name}>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"block px-4 py-2"
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { ChevronRightIcon } from "@heroicons/react/20/solid";
|
||||
import { useColorMode } from "@docusaurus/theme-common";
|
||||
import Dropdown from "@site/src/components/Elements/dropdown";
|
||||
|
||||
export default function HomepageHero() {
|
||||
const { isDarkTheme } = useColorMode();
|
||||
@ -51,15 +52,11 @@ export default function HomepageHero() {
|
||||
fugiat aliqua.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
{/* TODO: handle mobile model download app instead */}
|
||||
<Dropdown />
|
||||
<a
|
||||
href="#"
|
||||
className="rounded-md bg-indigo-600 dark:bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Download (Mac Silicon)
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
className="text-base font-semibold leading-6 text-gray-900 dark:text-white"
|
||||
>
|
||||
Book a Demo <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
|
||||
BIN
docs/static/img/apple-logo-white.png
vendored
Normal file
BIN
docs/static/img/apple-logo-white.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@ -1715,6 +1715,13 @@
|
||||
dependencies:
|
||||
"@hapi/hoek" "^9.0.0"
|
||||
|
||||
"@headlessui/react@^1.7.17":
|
||||
version "1.7.17"
|
||||
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
|
||||
integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
|
||||
dependencies:
|
||||
client-only "^0.0.1"
|
||||
|
||||
"@heroicons/react@^2.0.18":
|
||||
version "2.0.18"
|
||||
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
|
||||
@ -3143,6 +3150,11 @@ cli-table3@^0.6.2:
|
||||
optionalDependencies:
|
||||
"@colors/colors" "1.5.0"
|
||||
|
||||
client-only@^0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
|
||||
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
|
||||
|
||||
cliui@^7.0.2:
|
||||
version "7.0.4"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user