Skip to content

Commit d2a86ee

Browse files
handotdevhandotdev
committed
Update with bottom navbar
1 parent 50e9699 commit d2a86ee

File tree

4 files changed

+133
-555
lines changed

4 files changed

+133
-555
lines changed

‎pages/index.tsx

+103-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { useState } from 'react';
1+
import { useState, Fragment } from 'react';
22
import Head from 'next/head';
33
import Image from 'next/image';
4-
import Script from 'next/script';
54
import Link from 'next/link';
6-
import { Disclosure } from '@headlessui/react';
5+
import { Menu, Transition, Disclosure } from '@headlessui/react';
6+
import { ChevronDownIcon } from '@heroicons/react/solid';
77
import {
8-
MailIcon,
8+
MailIcon, PencilAltIcon,
99
} from '@heroicons/react/outline';
1010
import CodeEditor from '../components/CodeEditor';
1111
import Output from '../components/Output';
@@ -124,11 +124,9 @@ export default function Example() {
124124
'absolute inset-x-0 left-1/2 transform -translate-x-1/2 w-full overflow-hidden lg:inset-y-0',
125125
)}
126126
>
127-
<div className="relative h-full">
128-
<canvas id="gradient-canvas" />
129-
</div>
127+
<div className="relative h-full gradient" />
130128
</div>
131-
<header className="relative py-8">
129+
<header className="relative py-6">
132130
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
133131
<h1 className="text-2xl font-bold text-white">Documentation Generator</h1>
134132
<p className="mt-1 text-gray-300">Add some code to get started</p>
@@ -149,17 +147,112 @@ export default function Example() {
149147
language={outputDisplay}
150148
/>
151149
</div>
152-
<div className="h-full sm:m-0">
150+
<div className="h-full mt-4 sm:m-0">
153151
<Output
154152
output={outputDisplay}
155153
isLoading={false}
156154
/>
157155
</div>
158156
</div>
159157
</div>
158+
<div className="mt-16 w-full">
159+
<div className="grid gap-8 items-start justify-center">
160+
<span className="relative px-7 py-4 rounded-lg leading-none flex items-center border border-gray-100 shadow-sm">
161+
<span className="flex space-x-5">
162+
<div>
163+
<p className="text-sm text-gray-600 mb-1 font-medium">Language</p>
164+
<Menu as="div" className="relative inline-block text-left">
165+
<div>
166+
<Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-1 bg-white text-sm text-gray-700 hover:bg-gray-50 hover:border-gray-300">
167+
Auto-detect
168+
<ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
169+
</Menu.Button>
170+
</div>
171+
172+
<Transition
173+
as={Fragment}
174+
enter="transition ease-out duration-100"
175+
enterFrom="transform opacity-0 scale-95"
176+
enterTo="transform opacity-100 scale-100"
177+
leave="transition ease-in duration-75"
178+
leaveFrom="transform opacity-100 scale-100"
179+
leaveTo="transform opacity-0 scale-95"
180+
>
181+
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
182+
<div className="py-1">
183+
<Menu.Item>
184+
{({ active }) => (
185+
<span
186+
className={classNames(
187+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
188+
'block px-4 py-2 text-sm',
189+
)}
190+
>
191+
Account settings
192+
</span>
193+
)}
194+
</Menu.Item>
195+
</div>
196+
</Menu.Items>
197+
</Transition>
198+
</Menu>
199+
</div>
200+
<div>
201+
<p className="text-sm text-gray-600 mb-1 font-medium">Format</p>
202+
<Menu as="div" className="relative inline-block text-left">
203+
<div>
204+
<Menu.Button className="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-1 bg-white text-sm text-gray-700 hover:bg-gray-50 hover:border-gray-300">
205+
Auto-detect
206+
<ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
207+
</Menu.Button>
208+
</div>
209+
210+
<Transition
211+
as={Fragment}
212+
enter="transition ease-out duration-100"
213+
enterFrom="transform opacity-0 scale-95"
214+
enterTo="transform opacity-100 scale-100"
215+
leave="transition ease-in duration-75"
216+
leaveFrom="transform opacity-100 scale-100"
217+
leaveTo="transform opacity-0 scale-95"
218+
>
219+
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
220+
<div className="py-1">
221+
<Menu.Item>
222+
{({ active }) => (
223+
<span
224+
className={classNames(
225+
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
226+
'block px-4 py-2 text-sm',
227+
)}
228+
>
229+
Account settings
230+
</span>
231+
)}
232+
</Menu.Item>
233+
</div>
234+
</Menu.Items>
235+
</Transition>
236+
</Menu>
237+
</div>
238+
<button
239+
type="button"
240+
className="inline-flex space-x-1 items-center px-4 py-2 text-sm rounded-md text-green-600 bg-green-500 bg-opacity-25 hover:bg-opacity-40 duration-200"
241+
>
242+
<div>
243+
Generate
244+
</div>
245+
<div>
246+
<PencilAltIcon className="h-4 w-4" />
247+
</div>
248+
</button>
249+
</span>
250+
</span>
251+
</div>
252+
</div>
160253
</div>
161254
</main>
162-
<footer className="fixed pb-8 z-10 bottom-0 w-full">
255+
<footer className="relative pb-8 z-10 bottom-0 w-full">
163256
<div className="max-w-7xl mx-auto px-4 overflow-hidden sm:px-6 lg:px-8">
164257
<div className="mt-8 flex justify-center space-x-6">
165258
{footer.social.map((item) => (
@@ -180,7 +273,6 @@ export default function Example() {
180273
</p>
181274
</div>
182275
</footer>
183-
<Script src="gradient.js" />
184276
</div>
185277
);
186278
}

0 commit comments

Comments
 (0)