feat: finsh some ui components
This commit is contained in:
cheliangzhao
parent
a5ca0f5fd2
commit
27b7416d92
42
.docker/Dockerfile
Normal file
42
.docker/Dockerfile
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
FROM gcc:latest AS compiler
|
||||||
|
|
||||||
|
ENV nginx_version=1.25.2
|
||||||
|
|
||||||
|
WORKDIR /nginx
|
||||||
|
|
||||||
|
# RUN git clone https://github.com/google/ngx_brotli.git --depth=1; \
|
||||||
|
COPY nginx/ngx_brotli.tar.gz .
|
||||||
|
|
||||||
|
RUN tar -xvzf ./ngx_brotli.tar.gz
|
||||||
|
|
||||||
|
RUN wget https://nginx.org/download/nginx-${nginx_version}.tar.gz; \
|
||||||
|
tar -xzf .nginx-1.25.2.tar.gz; \
|
||||||
|
rm .nginx-1.25.2.tar.gz;
|
||||||
|
|
||||||
|
RUN cd .nginx-1.25.2; \
|
||||||
|
./configure --with-compat --add-dynamic-module=../ngx_brotli; \
|
||||||
|
make modules;
|
||||||
|
|
||||||
|
FROM nginx:latest AS prod
|
||||||
|
|
||||||
|
COPY --from=compiler /.nginx/nginx-1.25.2/objs/ngx_http_brotli_filter_module.so /usr/lib/nginx/modules/
|
||||||
|
|
||||||
|
COPY --from=compiler /.nginx/nginx-1.25.2/objs/ngx_http_brotli_static_module.so /usr/lib/nginx/modules/
|
||||||
|
|
||||||
|
RUN ln -snf /usr/share/zoneinfo/$TIME_ZONE /etc/localtime && echo $TIME_ZONE > /etc/timezone
|
||||||
|
|
||||||
|
|
||||||
|
RUN sed -i \
|
||||||
|
"1i\load_module modules/ngx_http_brotli_filter_module.so; \
|
||||||
|
load_module modules/ngx_http_brotli_static_module.so; " \
|
||||||
|
/etc/.nginx/.nginx.conf
|
||||||
|
|
||||||
|
# ENV TIME_ZONE=Asia/Shanghai
|
||||||
|
|
||||||
|
# COPY src /usr/share/.nginx/html
|
||||||
|
|
||||||
|
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime; \
|
||||||
|
echo 'Asia/Shanghai' >/etc/timezone;
|
||||||
|
|
||||||
|
|
||||||
|
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
22
.nginx/nginx.conf
Normal file
22
.nginx/nginx.conf
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
server {
|
||||||
|
brotli on;
|
||||||
|
brotli_comp_level 6;
|
||||||
|
brotli_types text/css application/javascript;
|
||||||
|
|
||||||
|
gzip on;
|
||||||
|
gzip_comp_level 6;
|
||||||
|
gzip_types text/css application/javascript;
|
||||||
|
|
||||||
|
listen 80;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
index index.html index.htm;
|
||||||
|
}
|
||||||
|
|
||||||
|
location ~ \.js$ {
|
||||||
|
expires 1d;
|
||||||
|
if_modified_since off;
|
||||||
|
etag off;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
.nginx/ngx_brotli.tar.gz
Normal file
BIN
.nginx/ngx_brotli.tar.gz
Normal file
Binary file not shown.
2
.npmrc
Normal file
2
.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
auto-install-peers=true
|
||||||
|
# registry=https://registry.npm.wps.cn/
|
||||||
37
app/components/bigImg/page.tsx
Normal file
37
app/components/bigImg/page.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
'use client'
|
||||||
|
export default function Component() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className='w-full bg-linear-gradient'
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className='flex justify-between items-end m-auto max-w-7xl h-20 px-3 /* small */
|
||||||
|
md:px-3 md:h-calc-2 /* middle */
|
||||||
|
xl:max-w-7xl xl:h-96 /* xlarge */
|
||||||
|
'>
|
||||||
|
<h1
|
||||||
|
className='self-center text-center text-lg leading-normal font-bold w-full /* small */
|
||||||
|
md:text-left md:text-calc-1 md:w-2/5 /* middle */
|
||||||
|
xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5 /* xlarge */
|
||||||
|
'
|
||||||
|
// style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
|
||||||
|
>
|
||||||
|
|
||||||
|
Free, official online office tutorials by WPS Academy
|
||||||
|
</h1>
|
||||||
|
<div
|
||||||
|
className='hidden
|
||||||
|
md:flex md:h-calc-1 /* midle */
|
||||||
|
xl:h-80 xl:w-3/5 /* xlarge */
|
||||||
|
'>
|
||||||
|
<img
|
||||||
|
className='w-full h-full'
|
||||||
|
src={'//res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png'}
|
||||||
|
alt={'big img'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
38
app/components/card/page.tsx
Normal file
38
app/components/card/page.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
'use client'
|
||||||
|
import { useHover } from "usehooks-ts";
|
||||||
|
import { useRef } from "react";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
const ref = useRef(null);
|
||||||
|
const isHover = useHover(ref);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='bg-white rounded-lg cursor-pointer w-64'>
|
||||||
|
<div className='relative w-full h-auto' ref={ref}>
|
||||||
|
<img className={'object-cover w-full rounded-t-lg'}
|
||||||
|
src={!isHover ?
|
||||||
|
'//res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
|
||||||
|
'//res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
|
||||||
|
alt={'img'}
|
||||||
|
/>
|
||||||
|
<div className={`absolute bottom-2 right-2
|
||||||
|
bg-gray-600 text-white text-xs
|
||||||
|
px-1 py-0.5 rounded-md
|
||||||
|
${isHover ? 'hidden' : 'flex'}`}
|
||||||
|
>
|
||||||
|
03:14
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex justify-between text-xs mt-2 text-gray-500 px-2'>
|
||||||
|
<div className='flex items-center gap-1 my-1'>
|
||||||
|
<img className='w-4 h-5'
|
||||||
|
alt={''}
|
||||||
|
src={'//res-academy.cache.wpscdn.com/static/images/icon_excel.png'}/>
|
||||||
|
<span>Spread</span>
|
||||||
|
</div>
|
||||||
|
<div>18.0K views</div>
|
||||||
|
</div>
|
||||||
|
<h1 className='text-md font-semibold mt-2 px-2 pb-3'>How use WPS</h1>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,73 +1,24 @@
|
||||||
'use client'
|
'use client'
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Switch } from '@headlessui/react'
|
||||||
|
|
||||||
import { Fragment, useState } from 'react'
|
export default function MyToggle() {
|
||||||
import { Listbox, Transition } from '@headlessui/react'
|
const [enabled, setEnabled] = useState(false)
|
||||||
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'
|
|
||||||
|
|
||||||
const people = [
|
|
||||||
{ name: 'Wade Cooper' },
|
|
||||||
{ name: 'Arlene Mccoy' },
|
|
||||||
{ name: 'Devon Webb' },
|
|
||||||
{ name: 'Tom Cook' },
|
|
||||||
{ name: 'Tanya Fox' },
|
|
||||||
{ name: 'Hellen Schmidt' },
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function Example() {
|
|
||||||
const [selected, setSelected] = useState(people[0])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed top-16 w-72">
|
<Switch
|
||||||
<Listbox value={selected} onChange={setSelected}>
|
checked={enabled}
|
||||||
<div className="relative mt-1">
|
onChange={setEnabled}
|
||||||
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
|
className={`${
|
||||||
<span className="block truncate">{selected.name}</span>
|
enabled ? 'bg-blue-600' : 'bg-gray-200'
|
||||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
} relative inline-flex h-6 w-11 items-center rounded-full`}
|
||||||
<ChevronUpDownIcon
|
>
|
||||||
className="h-5 w-5 text-gray-400"
|
<span className="sr-only">Enable notifications</span>
|
||||||
aria-hidden="true"
|
<span
|
||||||
/>
|
className={`${
|
||||||
</span>
|
enabled ? 'translate-x-6' : 'translate-x-1'
|
||||||
</Listbox.Button>
|
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
||||||
<Transition
|
/>
|
||||||
as={Fragment}
|
</Switch>
|
||||||
leave="transition ease-in duration-100"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
|
||||||
{people.map((person, personIdx) => (
|
|
||||||
<Listbox.Option
|
|
||||||
key={personIdx}
|
|
||||||
className={({ active }) =>
|
|
||||||
`relative cursor-default select-none py-2 pl-10 pr-4 ${
|
|
||||||
active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
value={person}
|
|
||||||
>
|
|
||||||
{({ selected }) => (
|
|
||||||
<>
|
|
||||||
<span
|
|
||||||
className={`block truncate ${
|
|
||||||
selected ? 'font-medium' : 'font-normal'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{person.name}
|
|
||||||
</span>
|
|
||||||
{selected ? (
|
|
||||||
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
|
|
||||||
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Listbox.Option>
|
|
||||||
))}
|
|
||||||
</Listbox.Options>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</Listbox>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
255
app/components/header/page.tsx
Normal file
255
app/components/header/page.tsx
Normal file
|
|
@ -0,0 +1,255 @@
|
||||||
|
'use client'
|
||||||
|
import { Fragment, useState } from 'react'
|
||||||
|
import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
|
||||||
|
import {
|
||||||
|
ArrowPathIcon,
|
||||||
|
Bars3Icon,
|
||||||
|
ChartPieIcon,
|
||||||
|
CursorArrowRaysIcon,
|
||||||
|
FingerPrintIcon,
|
||||||
|
SquaresPlusIcon,
|
||||||
|
XMarkIcon,
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid'
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
const products = [
|
||||||
|
{ name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: ChartPieIcon },
|
||||||
|
{ name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: CursorArrowRaysIcon },
|
||||||
|
{ name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', icon: FingerPrintIcon },
|
||||||
|
{ name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: SquaresPlusIcon },
|
||||||
|
{ name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon },
|
||||||
|
]
|
||||||
|
const callsToAction = [
|
||||||
|
{ name: 'Watch demo', href: '#', icon: PlayCircleIcon },
|
||||||
|
{ name: 'Contact sales', href: '#', icon: PhoneIcon },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function Example() {
|
||||||
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-white relative">
|
||||||
|
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
|
||||||
|
<div className="flex lg:flex-1">
|
||||||
|
<a href="#" className="-m-1.5 p-1.5">
|
||||||
|
<span className="sr-only">Your Company</span>
|
||||||
|
<img className="h-8 w-auto"
|
||||||
|
src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg" alt=""/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex lg:hidden">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
|
||||||
|
onClick={() => setMobileMenuOpen(true)}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Open main menu</span>
|
||||||
|
<Bars3Icon className="h-6 w-6" aria-hidden="true"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Popover.Group className="hidden lg:flex lg:gap-x-12">
|
||||||
|
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">Home</a>
|
||||||
|
|
||||||
|
<Popover className="">
|
||||||
|
<Popover.Button
|
||||||
|
className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
|
||||||
|
Video Tutorial
|
||||||
|
<ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
||||||
|
</Popover.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
enter="transition ease-out duration-200"
|
||||||
|
enterFrom="opacity-0 translate-y-1"
|
||||||
|
enterTo="opacity-100 translate-y-0"
|
||||||
|
leave="transition ease-in duration-150"
|
||||||
|
leaveFrom="opacity-100 translate-y-0"
|
||||||
|
leaveTo="opacity-0 translate-y-1"
|
||||||
|
>
|
||||||
|
<Popover.Panel
|
||||||
|
className="absolute left-0.5 right-0.5 mt-1 top-full z-10 w-screen overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
|
||||||
|
<div className="p-4">
|
||||||
|
{products.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.name}
|
||||||
|
className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
|
||||||
|
<item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
|
||||||
|
aria-hidden="true"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-auto">
|
||||||
|
<a href={item.href} className="block font-semibold text-gray-900">
|
||||||
|
{item.name}
|
||||||
|
<span className="absolute inset-0"/>
|
||||||
|
</a>
|
||||||
|
<p className="mt-1 text-gray-600">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
|
||||||
|
{callsToAction.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Popover.Panel>
|
||||||
|
</Transition>
|
||||||
|
</Popover>
|
||||||
|
|
||||||
|
<Popover className="">
|
||||||
|
<Popover.Button
|
||||||
|
className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
|
||||||
|
Graphic Tutorial
|
||||||
|
<ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
||||||
|
</Popover.Button>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
enter="transition ease-out duration-200"
|
||||||
|
enterFrom="opacity-0 translate-y-1"
|
||||||
|
enterTo="opacity-100 translate-y-0"
|
||||||
|
leave="transition ease-in duration-150"
|
||||||
|
leaveFrom="opacity-100 translate-y-0"
|
||||||
|
leaveTo="opacity-0 translate-y-1"
|
||||||
|
>
|
||||||
|
<Popover.Panel
|
||||||
|
className="absolute left-0.5 right-0.5 mt-1 top-full z-10 w-screen overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
|
||||||
|
<div className="p-4">
|
||||||
|
{products.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.name}
|
||||||
|
className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
|
||||||
|
<item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
|
||||||
|
aria-hidden="true"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-auto">
|
||||||
|
<a href={item.href} className="block font-semibold text-gray-900">
|
||||||
|
{item.name}
|
||||||
|
<span className="absolute inset-0"/>
|
||||||
|
</a>
|
||||||
|
<p className="mt-1 text-gray-600">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
|
||||||
|
{callsToAction.map((item) => (
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Popover.Panel>
|
||||||
|
</Transition>
|
||||||
|
</Popover>
|
||||||
|
</Popover.Group>
|
||||||
|
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||||
|
<a href="#" className="hidden xl:flex text-sm font-semibold leading-6 text-gray-900">
|
||||||
|
Login/Sign up
|
||||||
|
{/*Log in <span aria-hidden="true">→</span>*/}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
|
||||||
|
<div className="fixed inset-0 z-10"/>
|
||||||
|
<Dialog.Panel
|
||||||
|
className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<a href="#" className="-m-1.5 p-1.5">
|
||||||
|
<span className="sr-only">Your Company</span>
|
||||||
|
<img
|
||||||
|
className="h-8 w-auto"
|
||||||
|
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="-m-2.5 rounded-md p-2.5 text-gray-700"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Close menu</span>
|
||||||
|
<XMarkIcon className="h-6 w-6" aria-hidden="true"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 flow-root">
|
||||||
|
<div className="-my-6 divide-y divide-gray-500/10">
|
||||||
|
<div className="space-y-2 py-6">
|
||||||
|
<Disclosure as="div" className="-mx-3">
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<Disclosure.Button
|
||||||
|
className="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
|
||||||
|
Product
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={classNames(open ? 'rotate-180' : '', 'h-5 w-5 flex-none')}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</Disclosure.Button>
|
||||||
|
<Disclosure.Panel className="mt-2 space-y-2">
|
||||||
|
{[...products, ...callsToAction].map((item) => (
|
||||||
|
<Disclosure.Button
|
||||||
|
key={item.name}
|
||||||
|
as="a"
|
||||||
|
href={item.href}
|
||||||
|
className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Disclosure.Button>
|
||||||
|
))}
|
||||||
|
</Disclosure.Panel>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Features
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Marketplace
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Company
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="py-6">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog.Panel>
|
||||||
|
</Dialog>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
36
app/components/page.tsx
Normal file
36
app/components/page.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
import fs from 'fs';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
export async function getData() {
|
||||||
|
let dirs: string[] = [];
|
||||||
|
try {
|
||||||
|
fs.readdirSync(__dirname).filter(item => {
|
||||||
|
const p = path.resolve(__dirname, item);
|
||||||
|
const stat = fs.statSync(p);
|
||||||
|
if (stat.isDirectory()) dirs.push(item)
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
return dirs;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function Page() {
|
||||||
|
const list = await getData();
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<span>Components List</span>
|
||||||
|
{
|
||||||
|
list.map(i => {
|
||||||
|
return (
|
||||||
|
<li key={i}>
|
||||||
|
<Link href={`/components/${i}`}>{i}</Link>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -9,11 +9,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@media (prefers-color-scheme: dark) {*/
|
/*@media (prefers-color-scheme: dark) {*/
|
||||||
/* :root {*/
|
/* :root {*/
|
||||||
/* --foreground-rgb: 255, 255, 255;*/
|
/* --foreground-rgb: 255, 255, 255;*/
|
||||||
/* --background-start-rgb: 0, 0, 0;*/
|
/* --background-start-rgb: 0, 0, 0;*/
|
||||||
/* --background-end-rgb: 0, 0, 0;*/
|
/* --background-end-rgb: 0, 0, 0;*/
|
||||||
/* }*/
|
/* }*/
|
||||||
/*}*/
|
/*}*/
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
17
app/not-found.tsx
Normal file
17
app/not-found.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-base font-semibold text-indigo-600">404</p>
|
||||||
|
<h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">Page not found</h1>
|
||||||
|
<p className="mt-6 text-base leading-7 text-gray-600">Sorry, we couldn’t find the page you’re looking for.</p>
|
||||||
|
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||||
|
<a href="/" className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Go back home</a>
|
||||||
|
<a href="#" className="text-sm font-semibold">Contact support <span aria-hidden="true">→</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
24
app/page.tsx
24
app/page.tsx
|
|
@ -1,24 +1,12 @@
|
||||||
'use client'
|
import Link from "next/link";
|
||||||
import {useState} from 'react'
|
|
||||||
import {Switch} from '@headlessui/react'
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [enabled, setEnabled] = useState(false)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Switch
|
<div className='text-center mt-10 border hover:bg-gray-700'>
|
||||||
checked={enabled}
|
<Link href={'/components'}>
|
||||||
onChange={setEnabled}
|
<button>components</button>
|
||||||
className={`${
|
</Link>
|
||||||
enabled ? 'bg-blue-600' : 'bg-gray-200'
|
</div>
|
||||||
} relative inline-flex h-6 w-11 items-center rounded-full`}
|
|
||||||
>
|
|
||||||
<span className="sr-only">Enable notifications</span>
|
|
||||||
<span
|
|
||||||
className={`${
|
|
||||||
enabled ? 'translate-x-6' : 'translate-x-1'
|
|
||||||
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
|
||||||
/>
|
|
||||||
</Switch>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -10,10 +10,12 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^1.7.17",
|
"@headlessui/react": "^1.7.17",
|
||||||
|
"@heroicons/react": "^2.0.18",
|
||||||
"@types/node": "20.5.6",
|
"@types/node": "20.5.6",
|
||||||
"@types/react": "18.2.21",
|
"@types/react": "18.2.21",
|
||||||
"@types/react-dom": "18.2.7",
|
"@types/react-dom": "18.2.7",
|
||||||
"autoprefixer": "10.4.15",
|
"autoprefixer": "10.4.15",
|
||||||
|
"classnames": "^2.3.2",
|
||||||
"eslint": "8.47.0",
|
"eslint": "8.47.0",
|
||||||
"eslint-config-next": "13.4.19",
|
"eslint-config-next": "13.4.19",
|
||||||
"next": "13.4.19",
|
"next": "13.4.19",
|
||||||
|
|
@ -21,6 +23,7 @@
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"tailwindcss": "3.3.3",
|
"tailwindcss": "3.3.3",
|
||||||
"typescript": "5.2.2"
|
"typescript": "5.2.2",
|
||||||
|
"usehooks-ts": "^2.9.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3333
pnpm-lock.yaml
Normal file
3333
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -1,20 +1,29 @@
|
||||||
import type { Config } from 'tailwindcss'
|
import type { Config } from 'tailwindcss'
|
||||||
|
|
||||||
const config: Config = {
|
const config: Config = {
|
||||||
content: [
|
content: [
|
||||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||||
'gradient-conic':
|
'gradient-conic':
|
||||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||||
},
|
'linear-gradient': 'linear-gradient(222deg, #ECFEF1 0%, #EAF1F9 53%, #E8E8FE 100%)', // big img background
|
||||||
|
},
|
||||||
|
|
||||||
|
fontSize: {
|
||||||
|
'calc-1': 'calc((100vw - 8px) / 1280 * 36)', // big img title font size
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
'calc-1': 'calc((100vw - 8px) / 1280 * 320)', // big img img height
|
||||||
|
'calc-2': 'calc((100vw - 8px) / 1280 * 384)', // big img total height
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
plugins: [],
|
||||||
plugins: [],
|
|
||||||
}
|
}
|
||||||
export default config
|
export default config
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user