Skip to content

Commit

Permalink
examples and language
Browse files Browse the repository at this point in the history
  • Loading branch information
@abvthecity
abvthecity committed Jun 10, 2024
1 parent 7bdec88 commit c6ddb63
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 72 deletions.
12 changes: 6 additions & 6 deletions packages/ui/app/src/api-page/endpoints/EndpointContentCodeSnippets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
}, [selectedError]);

const exampleWithSchema = useMemo(() => mergeEndpointSchemaWithExample(endpoint, example), [endpoint, example]);
// const selectedClientGroup = clients.find((client) => client.language === selectedClient.language);
const selectedClientGroup = clients.find((client) => client.language === selectedClient.language);

const successTitle =
exampleWithSchema.responseBody != null
Expand Down Expand Up @@ -137,12 +137,12 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
className="gap-6 grid grid-rows-[repeat(auto-fit,minmax(0,min-content))] grid-rows w-full max-h-fit"
ref={ref}
>
{/* {selectedClientGroup != null && selectedClientGroup.examples.length > 1 && (
<ul className="fern-tabs fern-snippet-examples">
{selectedClientGroup != null && selectedClientGroup.examples.length > 1 && (
<ul className="fern-tabs h-10 -mb-6">
{selectedClientGroup.examples.map((example) => (
<li key={example.key} className="fern-tab">
<li key={example.key} className="fern-tab accent">
<button
className="group/tab-button"
className="group/tab-button px-[18px]"
onClick={() => {
onClickClient(example);
}}
Expand All @@ -155,7 +155,7 @@ const UnmemoizedEndpointContentCodeSnippets: React.FC<EndpointContentCodeSnippet
</li>
))}
</ul>
)} */}
)}
<CodeSnippetExample
title={<LanguageTabs clients={clients} onClickClient={onClickClient} selectedClient={selectedClient} />}
onClick={(e) => {
Expand Down
64 changes: 43 additions & 21 deletions packages/ui/app/src/api-page/endpoints/LanguageTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactElement, useRef } from "react";
import { ReactElement } from "react";
import { CodeExample, CodeExampleGroup } from "../examples/code-example";

interface LanguageTabsProps {
Expand All @@ -8,26 +8,48 @@ interface LanguageTabsProps {
}

export function LanguageTabs({ clients, onClickClient, selectedClient }: LanguageTabsProps): ReactElement {
const ref = useRef<HTMLDivElement>(null);
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const selectedLanguage = event.target.value;
const client = clients.find((client) => client.language === selectedLanguage);
if (client) {
onClickClient(client.examples[0]);
}
};
return (
<div ref={ref} className="h-full overflow-x-scroll overflow-y-hidden mask-grad-right-6 flex-1">
<ul className="fern-tabs h-full -mx-3 px-0">
{clients.map((client) => (
<li key={client.language} className="fern-tab accented">
<button
className="group/tab-button px-[18px]"
onClick={() => {
onClickClient(client.examples[0]);
}}
data-state={client.language === selectedClient.language ? "active" : "inactive"}
>
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">{client.languageDisplayName}</span>
</div>
</button>
</li>
))}
</ul>
</div>
<select
value={selectedClient.language}
onChange={handleChange}
className="border-none rounded-md py-1 pl-2 pr-8 hover:bg-[#F1F3F4] -mx-1"
>
{clients.map((client) => (
<option key={client.language} value={client.language}>
{client.languageDisplayName}
</option>
))}
</select>
);
}

// export function LanguageTabs({ clients, onClickClient, selectedClient }: LanguageTabsProps): ReactElement {
// return (
// <div className="h-full overflow-x-scroll overflow-y-hidden mask-grad-right-6 flex-1">
// <ul className="fern-tabs h-full -mx-3 px-0">
// {clients.map((client) => (
// <li key={client.language} className="fern-tab accented">
// <button
// className="group/tab-button px-[18px]"
// onClick={() => {
// onClickClient(client.examples[0]);
// }}
// data-state={client.language === selectedClient.language ? "active" : "inactive"}
// >
// <div className="flex min-w-0 items-center justify-start space-x-2">
// <span className="truncate font-medium font-headings">{client.languageDisplayName}</span>
// </div>
// </button>
// </li>
// ))}
// </ul>
// </div>
// );
// }
105 changes: 60 additions & 45 deletions packages/ui/app/src/docs/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { DocsV1Read } from "@fern-api/fdr-sdk";
import LanguageIcon from "@mui/icons-material/Language";
import MenuIcon from "@mui/icons-material/Menu";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import SearchIcon from "@mui/icons-material/Search";
Expand All @@ -8,7 +9,7 @@ import cn from "clsx";
import { CSSProperties, PropsWithChildren, forwardRef, memo } from "react";
import { FernLink } from "../components/FernLink";
import { SidebarSearchBar } from "../sidebar/SidebarSearchBar";
import { useOpenSearchDialog } from "../sidebar/atom";
import { useOpenMobileSidebar, useOpenSearchDialog } from "../sidebar/atom";
import { HeaderLogoSection } from "./HeaderLogoSection";

export declare namespace Header {
Expand Down Expand Up @@ -41,6 +42,7 @@ const UnmemoizedHeader = forwardRef<HTMLDivElement, PropsWithChildren<Header.Pro
) {
// const { colors } = useDocsContext();
const openSearchDialog = useOpenSearchDialog();
const openMobileSidebar = useOpenMobileSidebar();
// const isSearchBoxMounted = useAtomValue(SEARCH_BOX_MOUNTED);
// const searchService = useSearchService();

Expand All @@ -51,51 +53,64 @@ const UnmemoizedHeader = forwardRef<HTMLDivElement, PropsWithChildren<Header.Pro
ref={ref}
style={style}
>
<HeaderLogoSection logoHeight={logoHeight} logoHref={logoHref} />
<div className="flex items-center h-full">
<button
className="size-10 rounded-full t-muted mr-2 -ml-3 hover:bg-tag-default transition-colors lg:hidden"
onClick={openMobileSidebar}
>
<MenuIcon />
</button>

<HeaderLogoSection logoHeight={logoHeight} logoHref={logoHref} />

<ul className="fern-tabs flex-1 ml-[0.5px] max-lg:hidden">
<li className="fern-tab">
<FernLink className="group/tab-button" href="/api" data-state="active">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Gemini API</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://ai.google.dev/gemma" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Gemma</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://ai.google.dev/edge" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Google AI Edge</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://ai.google.dev/tools" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Tools</span>
<span className="pl-3.5">
<TriangleDownIcon className="size-[16px] scale-x-125 text-black -mr-0.5" />
</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://discuss.ai.google.dev/" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Community</span>
<span>
<OpenInNewIcon className="size-[18px] -ml-1 -mt-0.5" />
</span>
</div>
</FernLink>
</li>
</ul>
<ul className="fern-tabs flex-1 ml-[0.5px] max-lg:hidden">
<li className="fern-tab">
<FernLink className="group/tab-button" href="/api" data-state="active">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Gemini API</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://ai.google.dev/gemma" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Gemma</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://ai.google.dev/edge" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Google AI Edge</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink className="group/tab-button" href="https://ai.google.dev/tools" data-state="inactive">
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Tools</span>
<span className="pl-3.5">
<TriangleDownIcon className="size-[16px] scale-x-125 text-black -mr-0.5" />
</span>
</div>
</FernLink>
</li>
<li className="fern-tab max-xl:!hidden">
<FernLink
className="group/tab-button"
href="https://discuss.ai.google.dev/"
data-state="inactive"
>
<div className="flex min-w-0 items-center justify-start space-x-2">
<span className="truncate font-medium font-headings">Community</span>
<span>
<OpenInNewIcon className="size-[18px] -ml-1 -mt-0.5" />
</span>
</div>
</FernLink>
</li>
</ul>
</div>

<div className="flex items-center">
<SidebarSearchBar onClick={openSearchDialog} className="max-lg:hidden" />
Expand Down

0 comments on commit c6ddb63

Please sign in to comment.