mirror of
https://github.com/Xevion/xevion.dev.git
synced 2025-12-11 08:09:18 -06:00
Setup initial phototag page, add navbar with explicit AppWrapper component
This commit is contained in:
Xevion
84
src/components/AppWrapper.tsx
Normal file
84
src/components/AppWrapper.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import {FunctionComponent, ReactNode} from "react";
|
||||
import {Disclosure} from '@headlessui/react'
|
||||
import {HiBars3, HiXMark} from "react-icons/hi2";
|
||||
import {classNames} from "../utils/helpers";
|
||||
import Link from "next/link";
|
||||
|
||||
const navigation = [
|
||||
{name: 'Home', href: '/', current: true},
|
||||
{name: 'Projects', href: '/projects', current: false},
|
||||
{name: 'Contact', href: '/contact', current: false},
|
||||
]
|
||||
|
||||
type WrapperProps = {
|
||||
children: ReactNode | ReactNode[];
|
||||
};
|
||||
|
||||
const AppWrapper: FunctionComponent<WrapperProps> = ({children}: WrapperProps) => {
|
||||
return <div className="min-h-screen bg-zinc-800 text-zinc-50">
|
||||
<Disclosure as="nav" className="bg-zinc-900">
|
||||
{({open}) => (
|
||||
<>
|
||||
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
|
||||
<div className="relative flex h-16 items-center justify-between">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
{/* Mobile menu button*/}
|
||||
<Disclosure.Button
|
||||
className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-zinc-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{open ? (
|
||||
<HiXMark className="block h-6 w-6" aria-hidden="true"/>
|
||||
) : (
|
||||
<HiBars3 className="block h-6 w-6" aria-hidden="true"/>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
|
||||
<div className="hidden sm:ml-6 sm:block">
|
||||
<div className="flex space-x-4">
|
||||
{navigation.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={classNames(
|
||||
item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
|
||||
'px-3 py-2 rounded-md text-sm font-medium'
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Disclosure.Panel className="sm:hidden">
|
||||
<div className="space-y-1 px-2 pt-2 pb-3">
|
||||
{navigation.map((item) => (
|
||||
<Link href={item.href}>
|
||||
<Disclosure.Button
|
||||
key={item.name}
|
||||
as="a"
|
||||
className={classNames(
|
||||
item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
|
||||
'block px-3 py-2 rounded-md text-base font-medium'
|
||||
)}
|
||||
aria-current={item.current ? 'page' : undefined}
|
||||
>
|
||||
{item.name}
|
||||
</Disclosure.Button>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
|
||||
export default AppWrapper;
|
||||
63
src/pages/phototag.tsx
Normal file
63
src/pages/phototag.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import {NextPage} from "next";
|
||||
import Head from "next/head";
|
||||
import Image from "next/image";
|
||||
import {BsGithub} from "react-icons/bs";
|
||||
import Link from "next/link";
|
||||
import AppWrapper from "../components/AppWrapper";
|
||||
|
||||
const PhototagPage: NextPage = () => {
|
||||
return <>
|
||||
<Head>
|
||||
<title>Phototag | Xevion.dev</title>
|
||||
</Head>
|
||||
<AppWrapper>
|
||||
|
||||
<div className="bg-zinc-900 text-zinc-50 w-full overflow-auto h-full min-h-screen flex justify-center">
|
||||
<div className="relative my-10 p-3 px-6 w-full max-w-screen-md">
|
||||
<div className="pb-2 flex justify-between">
|
||||
<div className="text-2xl font-semibold">
|
||||
Phototag
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-1.5">
|
||||
<Link href="https://github.com/Xevion/phototag" target="_blank">
|
||||
<BsGithub className="w-5 h-5 hover:text-zinc-200"/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Image fill sizes="100vw" src="/phototag.png" alt=""
|
||||
className="!relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
|
||||
</div>
|
||||
<div className="mt-3 w-full prose prose-invert prose-lg">
|
||||
|
||||
<p>Phototag is a powerful tool that helps you quickly and easily add rich, descriptive tags to
|
||||
your
|
||||
photos. Using Google's Vision API, Phototag automatically generates tags based on the visual
|
||||
content
|
||||
of your photos, making it easier than ever to organize and find your photos.</p>
|
||||
<p>
|
||||
With support for IPTC metadata and Adobe XMP Sidecar files, you can easily integrate
|
||||
Phototag
|
||||
into
|
||||
your existing
|
||||
workflow on Windows. Whether you're a professional photographer or a casual snapshot taker,
|
||||
Phototag
|
||||
is the perfect tool for adding clarity and context to your photos.
|
||||
</p>
|
||||
<ul className="md:columns-2">
|
||||
<li>Simple, but configurable</li>
|
||||
<li>Fully automatic</li>
|
||||
<li>Leverages compression to reduce network load</li>
|
||||
<li>Supports JPEG, PNG, GIF etc.</li>
|
||||
<li>Supports IPTC metadata</li>
|
||||
<li>Supports Adobe XMP sidecar files</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppWrapper>
|
||||
|
||||
</>
|
||||
}
|
||||
|
||||
export default PhototagPage;
|
||||
Reference in New Issue
Block a user