feat: download btn detects os
This commit is contained in:
0xSage
parent
ad7e6a45e9
commit
6ec63bdb75
@ -3,7 +3,7 @@ import { Fragment } from "react";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { ChevronDownIcon } from "@heroicons/react/20/solid";
|
||||
|
||||
const items = [
|
||||
const systems = [
|
||||
{
|
||||
name: "Download for Mac (M1/M2)",
|
||||
href: "https://github.com/janhq/jan/releases/download/v0.1.2/Jan-0.1.2-arm64.dmg",
|
||||
@ -31,19 +31,32 @@ function classNames(...classes) {
|
||||
}
|
||||
|
||||
export default function Dropdown() {
|
||||
const uAgent = window.navigator.userAgent;
|
||||
let defaultSystem;
|
||||
|
||||
if (uAgent.indexOf("Win") !== -1) {
|
||||
defaultSystem = systems[2];
|
||||
} else if (uAgent.indexOf("Mac") !== -1) {
|
||||
// Note: There's no way to detect ARM architecture from browser. Hardcoding to M1/M2 for now.
|
||||
defaultSystem = systems[0];
|
||||
} else if (uAgent.indexOf("Linux") !== -1) {
|
||||
defaultSystem = systems[3];
|
||||
} else {
|
||||
defaultSystem = systems[0];
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="inline-flex align-items-stretch">
|
||||
{/* TODO dynamically detect users OS through browser */}
|
||||
<a
|
||||
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 hover:text-white"
|
||||
href={items[0].href}
|
||||
href={defaultSystem.href}
|
||||
>
|
||||
<img
|
||||
src={require("@site/static/img/apple-logo-white.png").default}
|
||||
alt="Logo"
|
||||
className="h-5 mr-3 -mt-1"
|
||||
/>
|
||||
Download for Mac (Silicon)
|
||||
{defaultSystem.name}
|
||||
</a>
|
||||
<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 active:border-l active:border-white h-full text-white bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-500 dark:hover:bg-indigo-400">
|
||||
@ -61,11 +74,11 @@ export default function Dropdown() {
|
||||
>
|
||||
<Menu.Items className="absolute right-0 z-10 mt-2 w-72 text-left origin-top-right rounded-md bg-indigo-600 dark:bg-indigo-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
{items.map((item) => (
|
||||
<Menu.Item key={item.name}>
|
||||
{systems.map((system) => (
|
||||
<Menu.Item key={system.name}>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href={item.href}
|
||||
href={system.href}
|
||||
className={classNames(
|
||||
active
|
||||
? "bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white"
|
||||
@ -74,11 +87,11 @@ export default function Dropdown() {
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={item.logo}
|
||||
src={system.logo}
|
||||
alt="Logo"
|
||||
className="w-3 mr-3 -mt-1"
|
||||
/>
|
||||
{item.name}
|
||||
{system.name}
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
LockClosedIcon,
|
||||
} from "@heroicons/react/20/solid";
|
||||
|
||||
const features = [
|
||||
const systems = [
|
||||
{
|
||||
name: "Mac",
|
||||
description:
|
||||
@ -47,20 +47,20 @@ export default function HomepageDownloads() {
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<div key={feature.name} className="flex flex-col">
|
||||
{systems.map((system) => (
|
||||
<div key={system.name} className="flex flex-col">
|
||||
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900 dark: text-white">
|
||||
<feature.icon
|
||||
<system.icon
|
||||
className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{feature.name}
|
||||
{system.name}
|
||||
</dt>
|
||||
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
|
||||
<p className="flex-auto">{feature.description}</p>
|
||||
<p className="flex-auto">{system.description}</p>
|
||||
<p className="mt-6">
|
||||
<a
|
||||
href={feature.href}
|
||||
href={system.href}
|
||||
className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
|
||||
>
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
|
||||
@ -8,7 +8,7 @@ export default function HomepageHero() {
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900">
|
||||
<div className="relative isolate pt-14">
|
||||
<div className="relative isolate md:pt-14 pt-0">
|
||||
{/* Background top gradient styling */}
|
||||
{colorMode === "dark" ? (
|
||||
<div
|
||||
@ -39,7 +39,7 @@ export default function HomepageHero() {
|
||||
)}
|
||||
|
||||
{/* Main hero block */}
|
||||
<div className="py-24 sm:py-32 lg:pb-40 animate-in fade-in zoom-in-50 duration-1000 ">
|
||||
<div className="py-24 lg:pb-40 animate-in fade-in zoom-in-50 duration-1000 ">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
{/* Hero text and buttons */}
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
@ -79,14 +79,15 @@ export default function HomepageHero() {
|
||||
src={
|
||||
colorMode === "dark"
|
||||
? // TODO replace with darkmode image
|
||||
require("@site/static/img/desktop-llm-chat-dark.png").default
|
||||
: require("@site/static/img/desktop-llm-chat-light.png").default
|
||||
require("@site/static/img/desktop-llm-chat-dark.png")
|
||||
.default
|
||||
: require("@site/static/img/desktop-llm-chat-light.png")
|
||||
.default
|
||||
}
|
||||
alt="App screenshot"
|
||||
width={2432}
|
||||
className="mt-16 rounded-lg md:rounded-2xl lg:rounded-3xl bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* Background top gradient styling */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user