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

✨ Feat: add shacn/ui and config docker

Browse Source
This commit is contained in:
cheliangzhao 2023-09-14 00:36:16 +08:00
parent 27b7416d92
commit 2b62aaacfd
20 changed files with 549 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
.docker/Dockerfile
View File

@ -1,42 +1,15 @@
FROM gcc:latest AS compiler
FROM node:alpine
ENV nginx_version=1.25.2
WORKDIR /app
WORKDIR /nginx
COPY package.json .
# RUN git clone https://github.com/google/ngx_brotli.git --depth=1; \
COPY nginx/ngx_brotli.tar.gz .
COPY .npmrc .
RUN tar -xvzf ./ngx_brotli.tar.gz
RUN npm install;
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;
COPY . .
RUN cd .nginx-1.25.2; \
./configure --with-compat --add-dynamic-module=../ngx_brotli; \
make modules;
RUN npm run build
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
CMD npm run start;

4
.dockerignore Normal file
View File

@ -0,0 +1,4 @@
node_modules
.next
.idea
.vscode

BIN
.nginx/ngx_brotli.tar.gz
View File

Binary file not shown.

2
.npmrc
View File

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

15
Makefile Normal file
View File

@ -0,0 +1,15 @@
container_name=nextjs-components-project:latest
.PHONY: start
start:
docker compose up -d --build
.PHONY: stop
stop:
docker compose rm -v --force --stop
docker image rm $(container_name)
.PHNY: restart
restart:
make stop
make start

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

@ -1,4 +1,7 @@
'use client'
import Image from "next/image"
export default function Component() {
return (
@ -15,7 +18,7 @@ export default function Component() {
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)' }}
// style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
>
Free, official online office tutorials by WPS Academy
@ -25,9 +28,9 @@ export default function Component() {
md:flex md:h-calc-1 /* midle */
xl:h-80 xl:w-3/5 /* xlarge */
'>
<img
<Image
className='w-full h-full'
src={'//res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png'}
src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
alt={'big img'}
/>
</div>

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

@ -1,6 +1,7 @@
'use client'
import { useHover } from "usehooks-ts";
import { useRef } from "react";
import Image from "next/image";
export default function Page() {
const ref = useRef(null);
@ -9,11 +10,14 @@ export default function Page() {
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'}
<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
@ -25,9 +29,12 @@ export default function Page() {
</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'}/>
<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>

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

@ -1,6 +1,6 @@
'use client'
import { Fragment, useState } from 'react'
import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
"use client";
import { Fragment, useState } from "react";
import { Dialog, Disclosure, Popover, Transition } from "@headlessui/react";
import {
ArrowPathIcon,
Bars3Icon,
@ -9,33 +9,46 @@ import {
FingerPrintIcon,
SquaresPlusIcon,
XMarkIcon,
} from '@heroicons/react/24/outline'
import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid'
import classNames from 'classnames';
} from "@heroicons/react/24/outline";
import {
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">
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<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>
<img className="h-8 w-auto"
src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg" alt=""/>
<Image
width={160}
height={30}
src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg"
alt=""
/>
</a>
</div>
<div className="flex lg:hidden">
@ -45,17 +58,21 @@ export default function Example() {
onClick={() => setMobileMenuOpen(true)}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true"/>
<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>
<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">
<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"/>
<ChevronDownIcon
className="h-5 w-5 flex-none text-gray-400"
aria-hidden="true"
/>
</Popover.Button>
<Transition
@ -67,23 +84,26 @@ export default function Example() {
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">
<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 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">
<a
href={item.href}
className="block font-semibold text-gray-900"
>
{item.name}
<span className="absolute inset-0"/>
<span className="absolute inset-0" />
</a>
<p className="mt-1 text-gray-600">{item.description}</p>
</div>
@ -97,7 +117,10 @@ export default function Example() {
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.icon
className="h-5 w-5 flex-none text-gray-400"
aria-hidden="true"
/>
{item.name}
</a>
))}
@ -107,10 +130,12 @@ export default function Example() {
</Popover>
<Popover className="">
<Popover.Button
className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
<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"/>
<ChevronDownIcon
className="h-5 w-5 flex-none text-gray-400"
aria-hidden="true"
/>
</Popover.Button>
<Transition
@ -122,23 +147,26 @@ export default function Example() {
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">
<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 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">
<a
href={item.href}
className="block font-semibold text-gray-900"
>
{item.name}
<span className="absolute inset-0"/>
<span className="absolute inset-0" />
</a>
<p className="mt-1 text-gray-600">{item.description}</p>
</div>
@ -152,7 +180,10 @@ export default function Example() {
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.icon
className="h-5 w-5 flex-none text-gray-400"
aria-hidden="true"
/>
{item.name}
</a>
))}
@ -162,20 +193,27 @@ export default function Example() {
</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">
<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">
<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
<Image
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt=""
@ -187,7 +225,7 @@ export default function Example() {
onClick={() => setMobileMenuOpen(false)}
>
<span className="sr-only">Close menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true"/>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
@ -196,11 +234,13 @@ export default function Example() {
<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">
<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')}
className={classNames(
open ? "rotate-180" : "",
"h-5 w-5 flex-none"
)}
aria-hidden="true"
/>
</Disclosure.Button>
@ -251,5 +291,5 @@ export default function Example() {
</Dialog.Panel>
</Dialog>
</header>
)
);
}

36
app/components/page.tsx
View File

@ -1,17 +1,18 @@
import Link from "next/link";
import fs from 'fs';
import path from 'path';
import fs from "fs";
import path from "path";
import { ArrowDownIcon } from "@heroicons/react/24/outline";
export async function getData() {
async function getData() {
let dirs: string[] = [];
try {
fs.readdirSync(__dirname).filter(item => {
fs.readdirSync(__dirname).filter((item) => {
const p = path.resolve(__dirname, item);
const stat = fs.statSync(p);
if (stat.isDirectory()) dirs.push(item)
if (stat.isDirectory()) dirs.push(item);
});
} catch (e) {
console.error(e)
console.error(e);
}
return dirs;
@ -20,17 +21,20 @@ export async function getData() {
export default async function Page() {
const list = await getData();
return (
<>
<span>Components List</span>
{
list.map(i => {
<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>
);
}

90
app/globals.css
View File

@ -1,22 +1,80 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--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;
}
body {
@apply bg-background text-foreground;
}
}
/*@media (prefers-color-scheme: dark) {*/
/* :root {*/
/* --foreground-rgb: 255, 255, 255;*/
/* --background-start-rgb: 0, 0, 0;*/
/* --background-end-rgb: 0, 0, 0;*/
/* }*/
/*}*/
body {
color: rgb(var(--foreground-rgb));
background: /*linear-gradient(*/ /* to bottom,*/ /* transparent,*/ /* rgb(var(--background-end-rgb))*/ /* )*/ rgb(var(--background-start-rgb));
}
html, body {
height: 100%;
}

28
app/layout.tsx
View File

@ -1,23 +1,31 @@
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { cn } from "@/lib/utils";
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import React from "react";
const inter = Inter({ subsets: ['latin'] })
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body
className={cn(
inter.className,
"flex flex-col justify-start items-center h-full"
)}
>
{children}
</body>
</html>
)
);
}

5
app/page.tsx
View File

@ -1,11 +1,12 @@
import { Button } from "@/components/ui/button";
import Link from "next/link";
export default function Home() {
return (
<div className='text-center mt-10 border hover:bg-gray-700'>
<div className='flex-1 flex justify-center items-center'>
<Link href={'/components'}>
<button>components</button>
<Button>components</Button>
</Link>
</div>
)

16
components.json Normal file
View File

@ -0,0 +1,16 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}

56
components/ui/button.tsx Normal file
View File

@ -0,0 +1,56 @@
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"
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",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
export { Button, buttonVariants }

12
docker-compose.yaml Normal file
View File

@ -0,0 +1,12 @@
version: "3"
services:
finalwork:
image: nextjs-components-project:latest
container_name: nextjs-components-project
build:
context: .
dockerfile: .docker/Dockerfile
restart: on-failure
ports:
- 80:3000

6
lib/utils.ts Normal file
View File

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

6
next.config.js
View File

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

7
package.json
View File

@ -11,18 +11,25 @@
"dependencies": {
"@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.0.18",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-slot": "^1.0.2",
"@types/node": "20.5.6",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.15",
"class-variance-authority": "^0.7.0",
"classnames": "^2.3.2",
"clsx": "^2.0.0",
"eslint": "8.47.0",
"eslint-config-next": "13.4.19",
"lucide-react": "^0.276.0",
"next": "13.4.19",
"postcss": "8.4.28",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "3.3.3",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.2.2",
"usehooks-ts": "^2.9.1"
}

110
pnpm-lock.yaml
View File

@ -11,6 +11,12 @@ dependencies:
'@heroicons/react':
specifier: ^2.0.18
version: registry.npmmirror.com/@heroicons/react@2.0.18(react@18.2.0)
'@radix-ui/react-icons':
specifier: ^1.3.0
version: registry.npmmirror.com/@radix-ui/react-icons@1.3.0(react@18.2.0)
'@radix-ui/react-slot':
specifier: ^1.0.2
version: registry.npmmirror.com/@radix-ui/react-slot@1.0.2(@types/react@18.2.21)(react@18.2.0)
'@types/node':
specifier: 20.5.6
version: registry.npmmirror.com/@types/node@20.5.6
@ -23,15 +29,24 @@ dependencies:
autoprefixer:
specifier: 10.4.15
version: registry.npmmirror.com/autoprefixer@10.4.15(postcss@8.4.28)
class-variance-authority:
specifier: ^0.7.0
version: registry.npmmirror.com/class-variance-authority@0.7.0
classnames:
specifier: ^2.3.2
version: registry.npmmirror.com/classnames@2.3.2
clsx:
specifier: ^2.0.0
version: registry.npmmirror.com/clsx@2.0.0
eslint:
specifier: 8.47.0
version: registry.npmmirror.com/eslint@8.47.0
eslint-config-next:
specifier: 13.4.19
version: registry.npmmirror.com/eslint-config-next@13.4.19(eslint@8.47.0)(typescript@5.2.2)
lucide-react:
specifier: ^0.276.0
version: registry.npmmirror.com/lucide-react@0.276.0(react@18.2.0)
next:
specifier: 13.4.19
version: registry.npmmirror.com/next@13.4.19(react-dom@18.2.0)(react@18.2.0)
@ -44,9 +59,15 @@ dependencies:
react-dom:
specifier: 18.2.0
version: registry.npmmirror.com/react-dom@18.2.0(react@18.2.0)
tailwind-merge:
specifier: ^1.14.0
version: registry.npmmirror.com/tailwind-merge@1.14.0
tailwindcss:
specifier: 3.3.3
version: registry.npmmirror.com/tailwindcss@3.3.3
tailwindcss-animate:
specifier: ^1.0.7
version: registry.npmmirror.com/tailwindcss-animate@1.0.7(tailwindcss@3.3.3)
typescript:
specifier: 5.2.2
version: registry.npmmirror.com/typescript@5.2.2
@ -361,6 +382,52 @@ packages:
fastq: registry.npmmirror.com/fastq@1.15.0
dev: false
registry.npmmirror.com/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.21)(react@18.2.0):
resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz}
id: registry.npmmirror.com/@radix-ui/react-compose-refs/1.0.1
name: '@radix-ui/react-compose-refs'
version: 1.0.1
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
dependencies:
'@babel/runtime': registry.npmmirror.com/@babel/runtime@7.22.11
'@types/react': registry.npmmirror.com/@types/react@18.2.21
react: registry.npmmirror.com/react@18.2.0
dev: false
registry.npmmirror.com/@radix-ui/react-icons@1.3.0(react@18.2.0):
resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz}
id: registry.npmmirror.com/@radix-ui/react-icons/1.3.0
name: '@radix-ui/react-icons'
version: 1.3.0
peerDependencies:
react: ^16.x || ^17.x || ^18.x
dependencies:
react: registry.npmmirror.com/react@18.2.0
dev: false
registry.npmmirror.com/@radix-ui/react-slot@1.0.2(@types/react@18.2.21)(react@18.2.0):
resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz}
id: registry.npmmirror.com/@radix-ui/react-slot/1.0.2
name: '@radix-ui/react-slot'
version: 1.0.2
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0
peerDependenciesMeta:
'@types/react':
optional: true
dependencies:
'@babel/runtime': registry.npmmirror.com/@babel/runtime@7.22.11
'@radix-ui/react-compose-refs': registry.npmmirror.com/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.21)(react@18.2.0)
'@types/react': registry.npmmirror.com/@types/react@18.2.21
react: registry.npmmirror.com/react@18.2.0
dev: false
registry.npmmirror.com/@rushstack/eslint-patch@1.3.3:
resolution: {integrity: sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.3.3.tgz}
name: '@rushstack/eslint-patch'
@ -830,6 +897,14 @@ packages:
fsevents: registry.npmmirror.com/fsevents@2.3.3
dev: false
registry.npmmirror.com/class-variance-authority@0.7.0:
resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz}
name: class-variance-authority
version: 0.7.0
dependencies:
clsx: registry.npmmirror.com/clsx@2.0.0
dev: false
registry.npmmirror.com/classnames@2.3.2:
resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz}
name: classnames
@ -842,6 +917,13 @@ packages:
version: 0.0.1
dev: false
registry.npmmirror.com/clsx@2.0.0:
resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/clsx/-/clsx-2.0.0.tgz}
name: clsx
version: 2.0.0
engines: {node: '>=6'}
dev: false
registry.npmmirror.com/color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz}
name: color-convert
@ -2183,6 +2265,17 @@ packages:
yallist: registry.npmmirror.com/yallist@4.0.0
dev: false
registry.npmmirror.com/lucide-react@0.276.0(react@18.2.0):
resolution: {integrity: sha512-ubP1Tyj67nsy84/ikelrFcjj7eEkD6hg9H/1Mhk22CGpbvPtEd3r8sMFQQ1YdpePx70Nt4oYIMfTPHZlag+ZLQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/lucide-react/-/lucide-react-0.276.0.tgz}
id: registry.npmmirror.com/lucide-react/0.276.0
name: lucide-react
version: 0.276.0
peerDependencies:
react: ^16.5.1 || ^17.0.0 || ^18.0.0
dependencies:
react: registry.npmmirror.com/react@18.2.0
dev: false
registry.npmmirror.com/merge2@1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz}
name: merge2
@ -2994,6 +3087,23 @@ packages:
engines: {node: '>= 0.4'}
dev: false
registry.npmmirror.com/tailwind-merge@1.14.0:
resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz}
name: tailwind-merge
version: 1.14.0
dev: false
registry.npmmirror.com/tailwindcss-animate@1.0.7(tailwindcss@3.3.3):
resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz}
id: registry.npmmirror.com/tailwindcss-animate/1.0.7
name: tailwindcss-animate
version: 1.0.7
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
dependencies:
tailwindcss: registry.npmmirror.com/tailwindcss@3.3.3
dev: false
registry.npmmirror.com/tailwindcss@3.3.3:
resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.3.3.tgz}
name: tailwindcss

76
tailwind.config.js Normal file
View File

@ -0,0 +1,76 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}