clz/nextjs-tailwindcss-headlessUI-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 Style: fix style

Browse Source
This commit is contained in:
cheliangzhao 2023-09-14 09:21:45 +08:00
parent 508feec47b
commit 81cd2ed02c
17 changed files with 2931 additions and 1161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/components/bigImg/page.tsx
View File

@ -1,40 +1,38 @@
'use client' "use client";
import Image from "next/image" import Image from "next/image";
export default function Component() { export default function Component() {
return (
return ( <div className="w-full bg-linear-gradient">
<div <div
className='w-full bg-linear-gradient' className="flex justify-between items-end m-auto max-w-7xl h-20 px-3 /* small */
>
<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 */ md:px-3 md:h-calc-2 /* middle */
xl:max-w-7xl xl:h-96 /* xlarge */ 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 */ 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 */ xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5 /* xlarge */
' "
// style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }} // style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
> >
Free, official online office tutorials by WPS Academy
Free, official online office tutorials by WPS Academy </h1>
</h1> <div
<div className="hidden
className='hidden
md:flex md:h-calc-1 /* midle */ md:flex md:h-calc-1 /* midle */
xl:h-80 xl:w-3/5 /* xlarge */ xl:h-80 xl:w-3/5 /* xlarge */
'> "
<Image >
className='w-full h-full' <Image
src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png" className="w-full h-full"
alt={'big img'} src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
/> alt={"big img"}
</div> />
</div>
</div> </div>
) </div>
} </div>
);
}

73
app/components/card/page.tsx
View File

@ -1,45 +1,48 @@
'use client' "use client";
import { useHover } from "usehooks-ts"; import { useHover } from "usehooks-ts";
import { useRef } from "react"; import { useRef } from "react";
import Image from "next/image"; import Image from "next/image";
export default function Page() { export default function Page() {
const ref = useRef(null); const ref = useRef(null);
const isHover = useHover(ref); const isHover = useHover(ref);
return ( return (
<div className='bg-white rounded-lg cursor-pointer w-64'> <div className="bg-white rounded-lg cursor-pointer w-64">
<div className='relative w-full h-auto' ref={ref}> <div className="relative w-full h-auto" ref={ref}>
<Image <Image
width={500} width={500}
height={250} height={250}
className={'object-cover w-full rounded-t-lg'} className={"object-cover w-full rounded-t-lg"}
src={!isHover ? src={
'https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png' : !isHover
'https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'} ? "https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png"
alt={'img'} : "https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif"
/> }
<div className={`absolute bottom-2 right-2 alt={"img"}
/>
<div
className={`absolute bottom-2 right-2
bg-gray-600 text-white text-xs bg-gray-600 text-white text-xs
px-1 py-0.5 rounded-md px-1 py-0.5 rounded-md
${isHover ? 'hidden' : 'flex'}`} ${isHover ? "hidden" : "flex"}`}
> >
03:14 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> </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>
);
} }

581
app/components/header/page.tsx
View File

@ -2,294 +2,327 @@
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react"; import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react";
import { import {
ArrowPathIcon, ArrowPathIcon,
Bars3Icon, Bars3Icon,
ChartPieIcon, ChartPieIcon,
CursorArrowRaysIcon, CursorArrowRaysIcon,
FingerPrintIcon, FingerPrintIcon,
SquaresPlusIcon, SquaresPlusIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { import {
ChevronDownIcon, ChevronDownIcon,
PhoneIcon, PhoneIcon,
PlayCircleIcon, PlayCircleIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
import classNames from "classnames"; import classNames from "classnames";
import Image from "next/image"; import Image from "next/image";
const products = [ 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: "Analytics",
{ name: "Security", description: "Your customers’ data will be safe and secure", href: "#", icon: FingerPrintIcon, }, description: "Get a better understanding of your traffic",
{ name: "Integrations", description: "Connect with third-party tools", href: "#", icon: SquaresPlusIcon, }, href: "#",
{ name: "Automations", description: "Build strategic funnels that will convert", href: "#", icon: ArrowPathIcon, }, 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 = [ const callsToAction = [
{ name: "Watch demo", href: "#", icon: PlayCircleIcon }, { name: "Watch demo", href: "#", icon: PlayCircleIcon },
{ name: "Contact sales", href: "#", icon: PhoneIcon }, { name: "Contact sales", href: "#", icon: PhoneIcon },
]; ];
export default function Example() { export default function Example() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return ( return (
<header className="bg-white relative w-full"> <div className="h-full w-full">
<nav <header className="bg-white relative w-full">
className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" <nav
aria-label="Global" 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"> <span className="sr-only">Open main menu</span>
<a href="#" className="-m-1.5 p-1.5"> <Bars3Icon className="h-6 w-6" aria-hidden="true" />
<span className="sr-only">Your Company</span> </button>
<Image </div>
width={160} <Popover.Group className="hidden lg:flex lg:gap-x-12">
height={30} <a
src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg" href="#"
alt="" className="text-sm font-semibold leading-6 text-gray-900"
/>
</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">&rarr;</span>*/}
</a>
</div>
</nav>
<Dialog
as="div"
className="lg:hidden"
open={mobileMenuOpen}
onClose={setMobileMenuOpen}
> >
<div className="fixed inset-0 z-10" /> Home
<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"> </a>
<div className="flex items-center justify-between">
<a href="#" className="-m-1.5 p-1.5"> <Popover className="">
<span className="sr-only">Your Company</span> <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
<Image Video Tutorial
className="h-8 w-auto" <ChevronDownIcon
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" className="h-5 w-5 flex-none text-gray-400"
alt="" aria-hidden="true"
/> />
</a> </Popover.Button>
<button
type="button" <Transition
className="-m-2.5 rounded-md p-2.5 text-gray-700" as={Fragment}
onClick={() => setMobileMenuOpen(false)} enter="transition ease-out duration-200"
> enterFrom="opacity-0 translate-y-1"
<span className="sr-only">Close menu</span> enterTo="opacity-100 translate-y-0"
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> leave="transition ease-in duration-150"
</button> leaveFrom="opacity-100 translate-y-0"
</div> leaveTo="opacity-0 translate-y-1"
<div className="mt-6 flow-root"> >
<div className="-my-6 divide-y divide-gray-500/10"> <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="space-y-2 py-6"> <div className="p-4">
<Disclosure as="div" className="-mx-3"> {products.map((item) => (
{({ open }) => ( <div
<> key={item.name}
<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"> className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
Product >
<ChevronDownIcon <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
className={classNames( <item.icon
open ? "rotate-180" : "", className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
"h-5 w-5 flex-none" aria-hidden="true"
)} />
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>
</div> <div className="flex-auto">
</Dialog.Panel> <a
</Dialog> href={item.href}
</header> 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">&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>
<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>
);
} }

58
app/components/page.tsx
View File

@ -4,37 +4,37 @@ import path from "path";
import { ArrowDownIcon } from "@heroicons/react/24/outline"; import { ArrowDownIcon } from "@heroicons/react/24/outline";
async function getData() { async function getData() {
let dirs: string[] = []; let dirs: string[] = [];
try { try {
fs.readdirSync(__dirname).filter((item) => { fs.readdirSync(__dirname).filter((item) => {
const p = path.resolve(__dirname, item); const p = path.resolve(__dirname, item);
const stat = fs.statSync(p); const stat = fs.statSync(p);
if (stat.isDirectory()) dirs.push(item); if (stat.isDirectory()) dirs.push(item);
}); });
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
return dirs; return dirs;
} }
export default async function Page() { export default async function Page() {
const list = await getData(); const list = await getData();
return ( return (
<div className="flex-1 flex flex-col justify-center items-start"> <div className="flex-1 flex flex-col justify-center items-start">
<div className="flex justify-center items-center gap-2"> <div className="flex justify-center items-center gap-2">
<span>Components List</span> <span>Components List</span>
<ArrowDownIcon width={18} height={18} /> <ArrowDownIcon width={18} height={18} />
</div> </div>
<div className="flex flex-col justify-start"> <div className="flex flex-col justify-start">
{list.map((i) => { {list.map((i) => {
return ( return (
<li key={i}> <li key={i}>
<Link href={`/components/${i}`}>{i}</Link> <Link href={`/components/${i}`}>{i}</Link>
</li> </li>
); );
})} })}
</div> </div>
</div> </div>
); );
} }

41
app/globals.css
View File

@ -1,7 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
@ -9,63 +9,63 @@
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%; --popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%; --popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%; --primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%; --primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%; --secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%; --secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%; --muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%; --muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%; --accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%; --accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%; --border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%; --ring: 222.2 84% 4.9%;
--radius: 0.5rem; --radius: 0.5rem;
} }
.dark { .dark {
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
--card: 222.2 84% 4.9%; --card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%; --popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%; --popover-foreground: 210 40% 98%;
--primary: 210 40% 98%; --primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%; --primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%; --secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%; --secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%; --muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%; --muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%; --accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%; --ring: 212.7 26.8% 83.9%;
} }
} }
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;
@ -75,6 +75,7 @@
} }
} }
html, body { html,
body {
height: 100%; height: 100%;
} }

2
app/layout.tsx
View File

@ -21,7 +21,7 @@ export default function RootLayout({
<body <body
className={cn( className={cn(
inter.className, inter.className,
"flex flex-col justify-start items-center h-full" "flex flex-col justify-center items-center h-full",
)} )}
> >
{children} {children}

43
app/not-found.tsx
View File

@ -1,17 +1,28 @@
export default function NotFound() { export default function NotFound() {
return ( return (
<> <>
<main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8"> <main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
<div className="text-center"> <div className="text-center">
<p className="text-base font-semibold text-indigo-600">404</p> <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> <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
<p className="mt-6 text-base leading-7 text-gray-600">Sorry, we couldn’t find the page you’re looking for.</p> Page not found
<div className="mt-10 flex items-center justify-center gap-x-6"> </h1>
<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> <p className="mt-6 text-base leading-7 text-gray-600">
<a href="#" className="text-sm font-semibold">Contact support <span aria-hidden="true">&rarr;</span></a> Sorry, we couldn’t find the page you’re looking for.
</div> </p>
</div> <div className="mt-10 flex items-center justify-center gap-x-6">
</main> <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>
</>
);
}

17
app/page.tsx
View File

@ -2,12 +2,11 @@ import { Button } from "@/components/ui/button";
import Link from "next/link"; import Link from "next/link";
export default function Home() { export default function Home() {
return (
return ( <div className="flex-1 flex justify-center items-center">
<div className='flex-1 flex justify-center items-center'> <Link href={"/components"}>
<Link href={'/components'}> <Button>components</Button>
<Button>components</Button> </Link>
</Link> </div>
</div> );
) }
}

2
components.json
View File

@ -13,4 +13,4 @@
"components": "@/components", "components": "@/components",
"utils": "@/lib/utils" "utils": "@/lib/utils"
} }
} }

26
components/ui/button.tsx
View File

@ -1,8 +1,8 @@
import * as React from "react" import * as React from "react";
import { Slot } from "@radix-ui/react-slot" import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils";
const buttonVariants = cva( 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", "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", variant: "default",
size: "default", size: "default",
}, },
} },
) );
export interface ButtonProps export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>, extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> { VariantProps<typeof buttonVariants> {
asChild?: boolean asChild?: boolean;
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => { ({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
} },
) );
Button.displayName = "Button" Button.displayName = "Button";
export { Button, buttonVariants } export { Button, buttonVariants };

8
lib/utils.ts
View File

@ -1,6 +1,6 @@
import { type ClassValue, clsx } from "clsx" import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge" import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
} }

10
next.config.js
View File

@ -1,8 +1,8 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
images: { images: {
domains: ['res-academy.cache.wpscdn.com'] domains: ["res-academy.cache.wpscdn.com"],
} },
} };
module.exports = nextConfig module.exports = nextConfig;

3
package.json
View File

@ -32,5 +32,8 @@
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"typescript": "5.2.2", "typescript": "5.2.2",
"usehooks-ts": "^2.9.1" "usehooks-ts": "^2.9.1"
},
"devDependencies": {
"prettier": "^3.0.3"
} }
} }

3103
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

10
postcss.config.js
View File

@ -1,6 +1,6 @@
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

28
tailwind.config.js
View File

@ -2,11 +2,11 @@
module.exports = { module.exports = {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
'./pages/**/*.{ts,tsx}', "./pages/**/*.{ts,tsx}",
'./components/**/*.{ts,tsx}', "./components/**/*.{ts,tsx}",
'./app/**/*.{ts,tsx}', "./app/**/*.{ts,tsx}",
'./src/**/*.{ts,tsx}', "./src/**/*.{ts,tsx}",
], ],
theme: { theme: {
container: { container: {
center: true, center: true,
@ -70,7 +70,23 @@ module.exports = {
"accordion-down": "accordion-down 0.2s ease-out", "accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 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")], plugins: [require("tailwindcss-animate")],
} };

29
tailwind.config.ts
View File

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