feat: finsh some ui components

This commit is contained in:
cheliangzhao 2023-08-25 21:53:07 +08:00
parent a5ca0f5fd2
commit 27b7416d92
16 changed files with 3839 additions and 106 deletions

42
.docker/Dockerfile Normal file
View 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
View 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

Binary file not shown.

2
.npmrc Normal file
View File

@ -0,0 +1,2 @@
auto-install-peers=true
# registry=https://registry.npm.wps.cn/

View 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>
)
}

View 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>
)
}

View File

@ -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>
) )
} }

View 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">&rarr;</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
View 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>
)
})
}
</>
)
}

View File

@ -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
View 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 couldnt find the page youre 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">&rarr;</span></a>
</div>
</div>
</main>
</>
)
}

View File

@ -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>
) )
} }

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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