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'
|
||||
import { useState } from 'react'
|
||||
import { Switch } from '@headlessui/react'
|
||||
|
||||
import { Fragment, useState } from 'react'
|
||||
import { Listbox, Transition } from '@headlessui/react'
|
||||
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])
|
||||
export default function MyToggle() {
|
||||
const [enabled, setEnabled] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="fixed top-16 w-72">
|
||||
<Listbox value={selected} onChange={setSelected}>
|
||||
<div className="relative mt-1">
|
||||
<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">
|
||||
<span className="block truncate">{selected.name}</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon
|
||||
className="h-5 w-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
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>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
className={`${
|
||||
enabled ? 'bg-blue-600' : 'bg-gray-200'
|
||||
} 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
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) {*/
|
||||
/* :root {*/
|
||||
/* --foreground-rgb: 255, 255, 255;*/
|
||||
/* --background-start-rgb: 0, 0, 0;*/
|
||||
/* --background-end-rgb: 0, 0, 0;*/
|
||||
/* }*/
|
||||
/* :root {*/
|
||||
/* --foreground-rgb: 255, 255, 255;*/
|
||||
/* --background-start-rgb: 0, 0, 0;*/
|
||||
/* --background-end-rgb: 0, 0, 0;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
|
||||
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 {useState} from 'react'
|
||||
import {Switch} from '@headlessui/react'
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
const [enabled, setEnabled] = useState(false)
|
||||
|
||||
return (
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
className={`${
|
||||
enabled ? 'bg-blue-600' : 'bg-gray-200'
|
||||
} 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>
|
||||
<div className='text-center mt-10 border hover:bg-gray-700'>
|
||||
<Link href={'/components'}>
|
||||
<button>components</button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -10,10 +10,12 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.17",
|
||||
"@heroicons/react": "^2.0.18",
|
||||
"@types/node": "20.5.6",
|
||||
"@types/react": "18.2.21",
|
||||
"@types/react-dom": "18.2.7",
|
||||
"autoprefixer": "10.4.15",
|
||||
"classnames": "^2.3.2",
|
||||
"eslint": "8.47.0",
|
||||
"eslint-config-next": "13.4.19",
|
||||
"next": "13.4.19",
|
||||
|
|
@ -21,6 +23,7 @@
|
|||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"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'
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user