✨ Feat: add shacn/ui and config docker

.docker/Dockerfile

@@ -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 .npmrc .
-COPY  nginx/ngx_brotli.tar.gz .
 
-RUN tar -xvzf ./ngx_brotli.tar.gz
+RUN npm install;
 
-RUN wget https://nginx.org/download/nginx-${nginx_version}.tar.gz; \
+COPY . .
-    tar -xzf .nginx-1.25.2.tar.gz; \
-    rm .nginx-1.25.2.tar.gz;
 
-RUN cd .nginx-1.25.2; \
+RUN npm run build
-    ./configure --with-compat --add-dynamic-module=../ngx_brotli; \
-    make modules;
 
-FROM nginx:latest AS prod
+CMD  npm run start;
-
-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

.dockerignore

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

.npmrc

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

Makefile

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

app/components/bigImg/page.tsx

@@ -1,4 +1,7 @@
 'use client'
+
+import Image from "next/image"
+
 export default function Component() {
 
     return (
@@ -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>

app/components/card/page.tsx

@@ -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,10 +10,13 @@ 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'}
+                <Image
+                    width={500}
+                    height={250}
+                    className={'object-cover w-full rounded-t-lg'}
                     src={!isHover ?
-                         '//res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
+                        'https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
-                         '//res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
+                        'https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
                     alt={'img'}
                 />
                 <div className={`absolute bottom-2 right-2
@@ -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'
+                    <Image
+                        width={32}
+                        height={38}
                         alt={''}
-                         src={'//res-academy.cache.wpscdn.com/static/images/icon_excel.png'}/>
+                        src='https://res-academy.cache.wpscdn.com/static/images/icon_excel.png'
+                    />
                     <span>Spread</span>
                 </div>
                 <div>18.0K views</div>

app/components/header/page.tsx

@@ -1,6 +1,6 @@
-'use client'
+"use client";
-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 {
     ArrowPathIcon,
     Bars3Icon,
@@ -9,33 +9,46 @@ import {
     FingerPrintIcon,
     SquaresPlusIcon,
     XMarkIcon,
-} from '@heroicons/react/24/outline'
+} from "@heroicons/react/24/outline";
-import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid'
+import {
-import classNames from 'classnames';
+    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: "Analytics", description: "Get a better understanding of your traffic", href: "#", icon: ChartPieIcon, },
-    { name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: CursorArrowRaysIcon },
+    { 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: "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: "Integrations", description: "Connect with third-party tools", href: "#", icon: SquaresPlusIcon, },
-    { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon },
+    { name: "Automations", description: "Build strategic funnels that will convert", href: "#", icon: ArrowPathIcon, },
-]
+
+];
 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() {
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
     return (
-        <header className="bg-white relative">
+        <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">
+            <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"
+                        <Image
-                             src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg" alt=""/>
+                            width={160}
+                            height={30}
+                            src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg"
+                            alt=""
+                        />
                     </a>
                 </div>
                 <div className="flex lg:hidden">
@@ -49,13 +62,17 @@ export default function Example() {
                     </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
+                        <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
-                            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,21 +84,24 @@ export default function Example() {
                             leaveFrom="opacity-100 translate-y-0"
                             leaveTo="opacity-0 translate-y-1"
                         >
-                            <Popover.Panel
+                            <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">
-                                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
+                                            <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                                                className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                                                <item.icon
-                                                <item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
+                                                    className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
-                                                           aria-hidden="true"/>
+                                                    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" />
                                                 </a>
@@ -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
+                        <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
-                            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,21 +147,24 @@ export default function Example() {
                             leaveFrom="opacity-100 translate-y-0"
                             leaveTo="opacity-0 translate-y-1"
                         >
-                            <Popover.Panel
+                            <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">
-                                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
+                                            <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
-                                                className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                                                <item.icon
-                                                <item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
+                                                    className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
-                                                           aria-hidden="true"/>
+                                                    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" />
                                                 </a>
@@ -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}>
+            <Dialog
+                as="div"
+                className="lg:hidden"
+                open={mobileMenuOpen}
+                onClose={setMobileMenuOpen}
+            >
                 <div className="fixed inset-0 z-10" />
-                <Dialog.Panel
+                <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">
-                    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=""
@@ -196,11 +234,13 @@ export default function Example() {
                                 <Disclosure as="div" className="-mx-3">
                                     {({ open }) => (
                                         <>
-                                            <Disclosure.Button
+                                            <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="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>
-    )
+    );
 }

app/components/page.tsx

@@ -1,17 +1,18 @@
 import Link from "next/link";
-import fs from 'fs';
+import fs from "fs";
-import path from 'path';
+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 (
-        <>
+        <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} />
-                list.map(i => {
+            </div>
+            <div className="flex flex-col justify-start">
+                {list.map((i) => {
                     return (
                         <li key={i}>
                             <Link href={`/components/${i}`}>{i}</Link>
                         </li>
-                    )
+                    );
-                })
+                })}
-            }
+            </div>
-        </>
+        </div>
-    )
+    );
 }

app/globals.css

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

app/layout.tsx

@@ -1,23 +1,31 @@
-import './globals.css'
+import { cn } from "@/lib/utils";
-import type { Metadata } from 'next'
+import "./globals.css";
-import { Inter } from 'next/font/google'
+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',
+  title: "Create Next App",
-  description: 'Generated by 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>
-  )
+  );
 }

app/page.tsx

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

components.json

@@ -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"
+  }
+}

components/ui/button.tsx

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

docker-compose.yaml

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

lib/utils.ts

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

next.config.js

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

package.json

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

pnpm-lock.yaml

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

tailwind.config.js

@@ -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")],
+}