Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: download btn detects os

Browse Source
This commit is contained in:
0xSage 2023-10-06 12:02:53 +08:00
parent ad7e6a45e9
commit 6ec63bdb75
3 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/src/components/Elements/dropdown.js
View File

@ -3,7 +3,7 @@ import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid"; import { ChevronDownIcon } from "@heroicons/react/20/solid";
const items = [ const systems = [
{ {
name: "Download for Mac (M1/M2)", name: "Download for Mac (M1/M2)",
href: "https://github.com/janhq/jan/releases/download/v0.1.2/Jan-0.1.2-arm64.dmg", 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() { 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 ( return (
<div className="inline-flex align-items-stretch"> <div className="inline-flex align-items-stretch">
{/* TODO dynamically detect users OS through browser */}
<a <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" 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 <img
src={require("@site/static/img/apple-logo-white.png").default} src={require("@site/static/img/apple-logo-white.png").default}
alt="Logo" alt="Logo"
className="h-5 mr-3 -mt-1" className="h-5 mr-3 -mt-1"
/> />
Download for Mac (Silicon) {defaultSystem.name}
</a> </a>
<Menu as="div" className="relative -ml-px block"> <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"> <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"> <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"> <div className="py-1">
{items.map((item) => ( {systems.map((system) => (
<Menu.Item key={item.name}> <Menu.Item key={system.name}>
{({ active }) => ( {({ active }) => (
<a <a
href={item.href} href={system.href}
className={classNames( className={classNames(
active active
? "bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white" ? "bg-indigo-500 dark:hover:bg-indigo-400 hover:text-white"
@ -74,11 +87,11 @@ export default function Dropdown() {
)} )}
> >
<img <img
src={item.logo} src={system.logo}
alt="Logo" alt="Logo"
className="w-3 mr-3 -mt-1" className="w-3 mr-3 -mt-1"
/> />
{item.name} {system.name}
</a> </a>
)} )}
</Menu.Item> </Menu.Item>

14
docs/src/components/Homepage/downloads.js
View File

@ -5,7 +5,7 @@ import {
LockClosedIcon, LockClosedIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
const features = [ const systems = [
{ {
name: "Mac", name: "Mac",
description: description:
@ -47,20 +47,20 @@ export default function HomepageDownloads() {
</div> </div>
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none"> <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"> <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) => ( {systems.map((system) => (
<div key={feature.name} className="flex flex-col"> <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"> <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" className="h-5 w-5 flex-none text-indigo-600 dark:text-indigo-400"
aria-hidden="true" aria-hidden="true"
/> />
{feature.name} {system.name}
</dt> </dt>
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300"> <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"> <p className="mt-6">
<a <a
href={feature.href} href={system.href}
className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400" className="text-sm font-semibold leading-6 text-indigo-600 dark:text-indigo-400"
> >
Learn more <span aria-hidden="true">→</span> Learn more <span aria-hidden="true">→</span>

11
docs/src/components/Homepage/hero.js
View File

@ -8,7 +8,7 @@ export default function HomepageHero() {
return ( return (
<div className="bg-white dark:bg-gray-900"> <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 */} {/* Background top gradient styling */}
{colorMode === "dark" ? ( {colorMode === "dark" ? (
<div <div
@ -39,7 +39,7 @@ export default function HomepageHero() {
)} )}
{/* Main hero block */} {/* 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"> <div className="mx-auto max-w-7xl px-6 lg:px-8">
{/* Hero text and buttons */} {/* Hero text and buttons */}
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-2xl text-center">
@ -79,14 +79,15 @@ export default function HomepageHero() {
src={ src={
colorMode === "dark" colorMode === "dark"
? // TODO replace with darkmode image ? // TODO replace with darkmode image
require("@site/static/img/desktop-llm-chat-dark.png").default require("@site/static/img/desktop-llm-chat-dark.png")
: require("@site/static/img/desktop-llm-chat-light.png").default .default
: require("@site/static/img/desktop-llm-chat-light.png")
.default
} }
alt="App screenshot" alt="App screenshot"
width={2432} 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" 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>
</div> </div>
{/* Background top gradient styling */} {/* Background top gradient styling */}