🎨 Style: fix style
This commit is contained in:
cheliangzhao
parent
508feec47b
commit
81cd2ed02c
|
|
@ -1,40 +1,38 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import Image from "next/image"
|
||||
import Image from "next/image";
|
||||
|
||||
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 */
|
||||
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 */
|
||||
"
|
||||
>
|
||||
<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
|
||||
"
|
||||
// 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 */
|
||||
'>
|
||||
<Image
|
||||
className='w-full h-full'
|
||||
src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
|
||||
alt={'big img'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
>
|
||||
<Image
|
||||
className="w-full h-full"
|
||||
src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
|
||||
alt={"big img"}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,48 @@
|
|||
'use client'
|
||||
"use client";
|
||||
import { useHover } from "usehooks-ts";
|
||||
import { useRef } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Page() {
|
||||
const ref = useRef(null);
|
||||
const isHover = useHover(ref);
|
||||
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}>
|
||||
<Image
|
||||
width={500}
|
||||
height={250}
|
||||
className={'object-cover w-full rounded-t-lg'}
|
||||
src={!isHover ?
|
||||
'https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
|
||||
'https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
|
||||
alt={'img'}
|
||||
/>
|
||||
<div className={`absolute bottom-2 right-2
|
||||
return (
|
||||
<div className="bg-white rounded-lg cursor-pointer w-64">
|
||||
<div className="relative w-full h-auto" ref={ref}>
|
||||
<Image
|
||||
width={500}
|
||||
height={250}
|
||||
className={"object-cover w-full rounded-t-lg"}
|
||||
src={
|
||||
!isHover
|
||||
? "https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png"
|
||||
: "https://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'>
|
||||
<Image
|
||||
width={32}
|
||||
height={38}
|
||||
alt={''}
|
||||
src='https://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>
|
||||
${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">
|
||||
<Image
|
||||
width={32}
|
||||
height={38}
|
||||
alt={""}
|
||||
src="https://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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,294 +2,327 @@
|
|||
import { Fragment, useState } from "react";
|
||||
import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react";
|
||||
import {
|
||||
ArrowPathIcon,
|
||||
Bars3Icon,
|
||||
ChartPieIcon,
|
||||
CursorArrowRaysIcon,
|
||||
FingerPrintIcon,
|
||||
SquaresPlusIcon,
|
||||
XMarkIcon,
|
||||
ArrowPathIcon,
|
||||
Bars3Icon,
|
||||
ChartPieIcon,
|
||||
CursorArrowRaysIcon,
|
||||
FingerPrintIcon,
|
||||
SquaresPlusIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
PhoneIcon,
|
||||
PlayCircleIcon,
|
||||
ChevronDownIcon,
|
||||
PhoneIcon,
|
||||
PlayCircleIcon,
|
||||
} from "@heroicons/react/20/solid";
|
||||
import classNames from "classnames";
|
||||
import Image from "next/image";
|
||||
|
||||
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, },
|
||||
|
||||
{
|
||||
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 },
|
||||
{ name: "Watch demo", href: "#", icon: PlayCircleIcon },
|
||||
{ name: "Contact sales", href: "#", icon: PhoneIcon },
|
||||
];
|
||||
|
||||
export default function Example() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="bg-white relative w-full">
|
||||
<nav
|
||||
className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
|
||||
aria-label="Global"
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<header className="bg-white relative w-full">
|
||||
<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>
|
||||
<Image
|
||||
width={160}
|
||||
height={30}
|
||||
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)}
|
||||
>
|
||||
<div className="flex lg:flex-1">
|
||||
<a href="#" className="-m-1.5 p-1.5">
|
||||
<span className="sr-only">Your Company</span>
|
||||
<Image
|
||||
width={160}
|
||||
height={30}
|
||||
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 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}
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<Image
|
||||
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>
|
||||
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 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>
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
</header>
|
||||
);
|
||||
<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 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>
|
||||
<Image
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,37 +4,37 @@ import path from "path";
|
|||
import { ArrowDownIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
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);
|
||||
}
|
||||
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;
|
||||
return dirs;
|
||||
}
|
||||
|
||||
export default async function Page() {
|
||||
const list = await getData();
|
||||
return (
|
||||
<div className="flex-1 flex flex-col justify-center items-start">
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<span>Components List</span>
|
||||
<ArrowDownIcon width={18} height={18} />
|
||||
</div>
|
||||
<div className="flex flex-col justify-start">
|
||||
{list.map((i) => {
|
||||
return (
|
||||
<li key={i}>
|
||||
<Link href={`/components/${i}`}>{i}</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const list = await getData();
|
||||
return (
|
||||
<div className="flex-1 flex flex-col justify-center items-start">
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<span>Components List</span>
|
||||
<ArrowDownIcon width={18} height={18} />
|
||||
</div>
|
||||
<div className="flex flex-col justify-start">
|
||||
{list.map((i) => {
|
||||
return (
|
||||
<li key={i}>
|
||||
<Link href={`/components/${i}`}>{i}</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
|
|
@ -9,63 +9,63 @@
|
|||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
|
|
@ -75,6 +75,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default function RootLayout({
|
|||
<body
|
||||
className={cn(
|
||||
inter.className,
|
||||
"flex flex-col justify-start items-center h-full"
|
||||
"flex flex-col justify-center items-center h-full",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,28 @@
|
|||
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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
17
app/page.tsx
17
app/page.tsx
|
|
@ -2,12 +2,11 @@ import { Button } from "@/components/ui/button";
|
|||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
|
||||
return (
|
||||
<div className='flex-1 flex justify-center items-center'>
|
||||
<Link href={'/components'}>
|
||||
<Button>components</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="flex-1 flex justify-center items-center">
|
||||
<Link href={"/components"}>
|
||||
<Button>components</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,4 +13,4 @@
|
|||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
|
|
@ -30,27 +30,27 @@ const buttonVariants = cva(
|
|||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
);
|
||||
},
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants }
|
||||
export { Button, buttonVariants };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
images: {
|
||||
domains: ['res-academy.cache.wpscdn.com']
|
||||
}
|
||||
}
|
||||
images: {
|
||||
domains: ["res-academy.cache.wpscdn.com"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig
|
||||
module.exports = nextConfig;
|
||||
|
|
|
|||
|
|
@ -32,5 +32,8 @@
|
|||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "5.2.2",
|
||||
"usehooks-ts": "^2.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3103
pnpm-lock.yaml
3103
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
],
|
||||
"./pages/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
|
|
@ -70,7 +70,23 @@ module.exports = {
|
|||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
// custom
|
||||
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: [require("tailwindcss-animate")],
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
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))',
|
||||
'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: [],
|
||||
}
|
||||
export default config
|
||||
Loading…
Reference in New Issue
Block a user