Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions app/components/Tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
"use client";

import { useState, ReactNode, Children, isValidElement } from "react";

interface TabsProps {
children: ReactNode;
}

interface TabPanelProps {
children: ReactNode;
title: string;
}

export function TabPanel({ children, title }: TabPanelProps) {
return <div>{children}</div>;
}

export function Tabs({ children }: TabsProps) {
const [activeTab, setActiveTab] = useState(0);

const handleTabClick = (index: number) => {
setActiveTab(index);
};

const arrayChildren = Children.toArray(children).filter(child => isValidElement(child));

return (
<div>
<div className="border-b border-neutral-600/30">
<nav className="-mb-px flex space-x-4" aria-label="Tabs">
{arrayChildren.map((child, index) => {
if (isValidElement(child)) {
const title = child.props.title || `Tab ${index + 1}`;
return (
<button
key={index}
onClick={() => handleTabClick(index)}
className={`${
activeTab === index
? 'border-green-400 text-green-400'
: 'border-transparent text-neutral-400 hover:text-neutral-200 hover:border-neutral-400'
} whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm focus:outline-none`}
>
{title}
</button>
);
}
return null;
})}
</nav>
</div>
<div>
{arrayChildren.map((child, index) => {
if (index === activeTab) {
if (isValidElement(child)) {
return <div key={index}>{child}</div>;
}
}
return null;
})}
</div>
</div>
);
}
24 changes: 19 additions & 5 deletions app/docs/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import { TabPanel, Tabs } from "../components/Tabs";

export default function Docs() {
const [currentPage, setCurrentPage] = useState("main");
Expand Down Expand Up @@ -554,14 +555,27 @@ export default function Docs() {
<h4 className="text-lg font-medium text-white mb-3">
1. Creating a new DocumentDB instance
</h4>
<div className="bg-neutral-900/50 rounded-lg p-4 border border-neutral-600/30 mb-4">
<pre className="text-green-400 font-mono text-sm overflow-x-auto">
{`docker pull ghcr.io/microsoft/documentdb/documentdb-local:latest
<Tabs>
<TabPanel title="Bash">
<div className="bg-neutral-900/50 rounded-lg p-4 border border-neutral-600/30 mb-4">
<pre className="text-green-400 font-mono text-sm overflow-x-auto">
{`docker pull ghcr.io/microsoft/documentdb/documentdb-local:latest
docker tag ghcr.io/microsoft/documentdb/documentdb-local:latest documentdb
docker run -dt -p 10260:10260 --name documentdb-container documentdb --username <YOUR_USERNAME> --password <YOUR_PASSWORD>
docker image rm -f ghcr.io/microsoft/documentdb/documentdb-local:latest || echo "No existing documentdb image to remove"`}
</pre>
</div>
</pre></div>
</TabPanel>
<TabPanel title="PowerShell">
<div className="bg-neutral-900/50 rounded-lg p-4 border border-neutral-600/30 mb-4">
<pre className="text-green-400 font-mono text-sm overflow-x-auto">
{`docker pull ghcr.io/microsoft/documentdb/documentdb-local:latest
docker tag ghcr.io/microsoft/documentdb/documentdb-local:latest documentdb
docker run -dt -p 10260:10260 --name documentdb-container documentdb --username <YOUR_USERNAME> --password <YOUR_PASSWORD>
docker image rm -f ghcr.io/microsoft/documentdb/documentdb-local:latest; if ($LASTEXITCODE -ne 0) { echo "No existing documentdb image to remove" }`}
</pre>
</div>
</TabPanel>
</Tabs>
<div className="bg-blue-900/20 border border-blue-500/30 rounded-lg p-4 mb-4">
<p className="text-blue-200 text-sm">
<span className="font-medium">Note:</span> Replace{" "}
Expand Down