mirror of
https://github.com/LukeHagar/jsdoc-cheatsheet.git
synced 2025-12-06 12:37:48 +00:00
Initialized repository for project JSDoc cheatsheet
Co-authored-by: Luke Hagar <5702154+LukeHagar@users.noreply.github.com>
This commit is contained in:
v0
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
30
README.md
Normal file
30
README.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# JSDoc cheatsheet
|
||||||
|
|
||||||
|
*Automatically synced with your [v0.app](https://v0.app) deployments*
|
||||||
|
|
||||||
|
[](https://vercel.com/luke-hagars-projects/v0-jsd-oc-cheatsheet)
|
||||||
|
[](https://v0.app/chat/projects/iYBBJ3Ec5uz)
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This repository will stay in sync with your deployed chats on [v0.app](https://v0.app).
|
||||||
|
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app).
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
Your project is live at:
|
||||||
|
|
||||||
|
**[https://vercel.com/luke-hagars-projects/v0-jsd-oc-cheatsheet](https://vercel.com/luke-hagars-projects/v0-jsd-oc-cheatsheet)**
|
||||||
|
|
||||||
|
## Build your app
|
||||||
|
|
||||||
|
Continue building your app on:
|
||||||
|
|
||||||
|
**[https://v0.app/chat/projects/iYBBJ3Ec5uz](https://v0.app/chat/projects/iYBBJ3Ec5uz)**
|
||||||
|
|
||||||
|
## How It Works
|
||||||
|
|
||||||
|
1. Create and modify your project using [v0.app](https://v0.app)
|
||||||
|
2. Deploy your chats from the v0 interface
|
||||||
|
3. Changes are automatically pushed to this repository
|
||||||
|
4. Vercel deploys the latest version from this repository
|
||||||
93
app/globals.css
Normal file
93
app/globals.css
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Updated to blue dark theme only - removing light theme variables */
|
||||||
|
--background: #0f172a;
|
||||||
|
--foreground: #f1f5f9;
|
||||||
|
--card: #1e293b;
|
||||||
|
--card-foreground: #f1f5f9;
|
||||||
|
--popover: #1e293b;
|
||||||
|
--popover-foreground: #f1f5f9;
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-foreground: #ffffff;
|
||||||
|
--secondary: #1e40af;
|
||||||
|
--secondary-foreground: #ffffff;
|
||||||
|
--muted: #334155;
|
||||||
|
--muted-foreground: #cbd5e1;
|
||||||
|
--accent: #2563eb;
|
||||||
|
--accent-foreground: #ffffff;
|
||||||
|
--destructive: #dc2626;
|
||||||
|
--destructive-foreground: #ffffff;
|
||||||
|
--border: #475569;
|
||||||
|
--input: #334155;
|
||||||
|
--ring: #3b82f6;
|
||||||
|
--chart-1: #3b82f6;
|
||||||
|
--chart-2: #1d4ed8;
|
||||||
|
--chart-3: #2563eb;
|
||||||
|
--chart-4: #1e40af;
|
||||||
|
--chart-5: #1e3a8a;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
--sidebar: #1e293b;
|
||||||
|
--sidebar-foreground: #f1f5f9;
|
||||||
|
--sidebar-primary: #3b82f6;
|
||||||
|
--sidebar-primary-foreground: #ffffff;
|
||||||
|
--sidebar-accent: #2563eb;
|
||||||
|
--sidebar-accent-foreground: #ffffff;
|
||||||
|
--sidebar-border: #475569;
|
||||||
|
--sidebar-ring: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Removed .dark class since we're dark theme only */
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
26
app/layout.tsx
Normal file
26
app/layout.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import type { Metadata } from 'next'
|
||||||
|
import { GeistSans } from 'geist/font/sans'
|
||||||
|
import { GeistMono } from 'geist/font/mono'
|
||||||
|
import { Analytics } from '@vercel/analytics/next'
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'v0 App',
|
||||||
|
description: 'Created with v0',
|
||||||
|
generator: 'v0.app',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
|
||||||
|
{children}
|
||||||
|
<Analytics />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
672
app/page.tsx
Normal file
672
app/page.tsx
Normal file
@@ -0,0 +1,672 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import { useState } from "react"
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||||
|
import { Badge } from "@/components/ui/badge"
|
||||||
|
import { Button } from "@/components/ui/button"
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||||
|
import { Separator } from "@/components/ui/separator"
|
||||||
|
import { BookOpen, Code, FileText, Hash, Info, Settings, Tag, Users, ChevronRight } from "lucide-react"
|
||||||
|
|
||||||
|
const sections = [
|
||||||
|
{
|
||||||
|
id: "basic",
|
||||||
|
title: "Basic Tags",
|
||||||
|
icon: Tag,
|
||||||
|
subsections: ["@description", "@author", "@version", "@since", "@deprecated"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "parameters",
|
||||||
|
title: "Parameters & Returns",
|
||||||
|
icon: Code,
|
||||||
|
subsections: ["@param", "@returns", "@throws", "@yields"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "types",
|
||||||
|
title: "Type Definitions",
|
||||||
|
icon: Hash,
|
||||||
|
subsections: ["@typedef", "@property", "@enum", "@type"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "functions",
|
||||||
|
title: "Functions & Classes",
|
||||||
|
icon: Settings,
|
||||||
|
subsections: ["@function", "@class", "@constructor", "@method", "@static", "@override"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "modules",
|
||||||
|
title: "Modules & Namespaces",
|
||||||
|
icon: FileText,
|
||||||
|
subsections: ["@module", "@namespace", "@memberof", "@exports", "@requires"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "advanced",
|
||||||
|
title: "Advanced Tags",
|
||||||
|
icon: BookOpen,
|
||||||
|
subsections: ["@callback", "@event", "@fires", "@listens", "@mixes", "@abstract"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "objects",
|
||||||
|
title: "Objects & Interfaces",
|
||||||
|
icon: Hash,
|
||||||
|
subsections: ["@interface", "@implements", "@extends", "@mixin"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "documentation",
|
||||||
|
title: "Documentation Tags",
|
||||||
|
icon: Info,
|
||||||
|
subsections: ["@example", "@see", "@link", "@tutorial", "@todo"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "examples",
|
||||||
|
title: "Complete Examples",
|
||||||
|
icon: Info,
|
||||||
|
subsections: ["Function Example", "Class Example", "Module Example"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "best-practices",
|
||||||
|
title: "Best Practices",
|
||||||
|
icon: Users,
|
||||||
|
subsections: ["Consistency", "Completeness", "Clarity", "Type Safety", "Examples"],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const jsdocData = {
|
||||||
|
basic: {
|
||||||
|
title: "Basic Tags",
|
||||||
|
description: "Essential JSDoc tags for documenting your code",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@description",
|
||||||
|
syntax: "@description {string} Description text",
|
||||||
|
example: "/**\n * @description Calculates the sum of two numbers\n */",
|
||||||
|
description: "Provides a description of the function, class, or variable",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@author",
|
||||||
|
syntax: "@author {string} Author name <email>",
|
||||||
|
example: "/**\n * @author John Doe <john@example.com>\n */",
|
||||||
|
description: "Specifies the author of the code",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@version",
|
||||||
|
syntax: "@version {string} Version number",
|
||||||
|
example: "/**\n * @version 1.2.0\n */",
|
||||||
|
description: "Indicates the version of the code",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@since",
|
||||||
|
syntax: "@since {string} Version when added",
|
||||||
|
example: "/**\n * @since 1.0.0\n */",
|
||||||
|
description: "Specifies when the feature was added",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@deprecated",
|
||||||
|
syntax: "@deprecated {string} Deprecation message",
|
||||||
|
example: "/**\n * @deprecated Use newFunction() instead\n */",
|
||||||
|
description: "Marks code as deprecated",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
title: "Parameters & Returns",
|
||||||
|
description: "Document function parameters, return values, and exceptions",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@param",
|
||||||
|
syntax: "@param {type} name Description",
|
||||||
|
example: "/**\n * @param {number} x - The first number\n * @param {number} y - The second number\n */",
|
||||||
|
description: "Documents function parameters",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@returns",
|
||||||
|
syntax: "@returns {type} Description",
|
||||||
|
example: "/**\n * @returns {number} The sum of x and y\n */",
|
||||||
|
description: "Documents the return value",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@throws",
|
||||||
|
syntax: "@throws {ErrorType} Description",
|
||||||
|
example: "/**\n * @throws {TypeError} When input is not a number\n */",
|
||||||
|
description: "Documents exceptions that may be thrown",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@yields",
|
||||||
|
syntax: "@yields {type} Description",
|
||||||
|
example: "/**\n * @yields {number} The next number in sequence\n */",
|
||||||
|
description: "Documents what a generator function yields",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
types: {
|
||||||
|
title: "Type Definitions",
|
||||||
|
description: "Define and document custom types and interfaces",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@typedef",
|
||||||
|
syntax: "@typedef {Object} TypeName",
|
||||||
|
example: "/**\n * @typedef {Object} User\n * @property {string} name\n * @property {number} age\n */",
|
||||||
|
description: "Defines a custom type",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@property",
|
||||||
|
syntax: "@property {type} name Description",
|
||||||
|
example: "/**\n * @property {string} email - User email address\n */",
|
||||||
|
description: "Documents object properties",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@enum",
|
||||||
|
syntax: "@enum {type}",
|
||||||
|
example: '/**\n * @enum {string}\n */\nconst Status = {\n PENDING: "pending",\n COMPLETE: "complete"\n}',
|
||||||
|
description: "Documents enumeration values",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@type",
|
||||||
|
syntax: "@type {type}",
|
||||||
|
example: "/**\n * @type {string|number}\n */\nlet value;",
|
||||||
|
description: "Specifies the type of a variable",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
functions: {
|
||||||
|
title: "Functions & Classes",
|
||||||
|
description: "Document functions, classes, constructors, and methods",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@function",
|
||||||
|
syntax: "@function",
|
||||||
|
example: "/**\n * @function calculateTotal\n * @description Calculates order total\n */",
|
||||||
|
description: "Explicitly marks something as a function",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@class",
|
||||||
|
syntax: "@class",
|
||||||
|
example: "/**\n * @class\n * @description Represents a user account\n */",
|
||||||
|
description: "Documents a class",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@constructor",
|
||||||
|
syntax: "@constructor",
|
||||||
|
example: "/**\n * @constructor\n * @param {string} name - User name\n */",
|
||||||
|
description: "Documents a constructor function",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@method",
|
||||||
|
syntax: "@method",
|
||||||
|
example: "/**\n * @method getName\n * @returns {string} The user name\n */",
|
||||||
|
description: "Documents a method",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@static",
|
||||||
|
syntax: "@static",
|
||||||
|
example: "/**\n * @static\n * @method createUser\n */",
|
||||||
|
description: "Indicates a static method or property",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@override",
|
||||||
|
syntax: "@override",
|
||||||
|
example: "/**\n * @override\n * @method toString\n */",
|
||||||
|
description: "Indicates method overrides parent method",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
modules: {
|
||||||
|
title: "Modules & Namespaces",
|
||||||
|
description: "Organize code with modules, namespaces, and membership",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@module",
|
||||||
|
syntax: "@module ModuleName",
|
||||||
|
example: "/**\n * @module UserUtils\n * @description Utilities for user management\n */",
|
||||||
|
description: "Documents a module",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@namespace",
|
||||||
|
syntax: "@namespace NamespaceName",
|
||||||
|
example: "/**\n * @namespace MyApp.Utils\n */",
|
||||||
|
description: "Documents a namespace",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@memberof",
|
||||||
|
syntax: "@memberof ParentName",
|
||||||
|
example: "/**\n * @memberof MyApp.Utils\n * @function formatName\n */",
|
||||||
|
description: "Indicates membership in a parent",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@exports",
|
||||||
|
syntax: "@exports ModuleName",
|
||||||
|
example: "/**\n * @exports UserService\n */",
|
||||||
|
description: "Documents what a module exports",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@requires",
|
||||||
|
syntax: "@requires ModuleName",
|
||||||
|
example: "/**\n * @requires lodash\n */",
|
||||||
|
description: "Documents module dependencies",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
advanced: {
|
||||||
|
title: "Advanced Tags",
|
||||||
|
description: "Advanced JSDoc features for complex documentation needs",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@callback",
|
||||||
|
syntax: "@callback CallbackName",
|
||||||
|
example: "/**\n * @callback RequestCallback\n * @param {Error} error\n * @param {Object} response\n */",
|
||||||
|
description: "Documents a callback function type",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@event",
|
||||||
|
syntax: "@event EventName",
|
||||||
|
example: "/**\n * @event MyClass#dataLoaded\n * @type {Object}\n */",
|
||||||
|
description: "Documents an event",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@fires",
|
||||||
|
syntax: "@fires EventName",
|
||||||
|
example: "/**\n * @fires MyClass#dataLoaded\n */",
|
||||||
|
description: "Indicates function fires an event",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@listens",
|
||||||
|
syntax: "@listens EventName",
|
||||||
|
example: "/**\n * @listens MyClass#dataLoaded\n */",
|
||||||
|
description: "Indicates function listens to an event",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@mixes",
|
||||||
|
syntax: "@mixes MixinName",
|
||||||
|
example: "/**\n * @mixes EventEmitter\n */",
|
||||||
|
description: "Documents that class mixes in another",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@abstract",
|
||||||
|
syntax: "@abstract",
|
||||||
|
example: "/**\n * @abstract\n * @method process\n */",
|
||||||
|
description: "Indicates abstract method or class",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
examples: {
|
||||||
|
title: "Complete Examples",
|
||||||
|
description: "Real-world JSDoc documentation examples",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "Function Example",
|
||||||
|
syntax: "Complete function documentation",
|
||||||
|
example: `/**
|
||||||
|
* Calculates the area of a rectangle
|
||||||
|
* @function calculateArea
|
||||||
|
* @param {number} width - The width of the rectangle
|
||||||
|
* @param {number} height - The height of the rectangle
|
||||||
|
* @returns {number} The area of the rectangle
|
||||||
|
* @throws {TypeError} When width or height is not a number
|
||||||
|
* @example
|
||||||
|
* // Calculate area of 5x3 rectangle
|
||||||
|
* const area = calculateArea(5, 3);
|
||||||
|
* console.log(area); // 15
|
||||||
|
* @since 1.0.0
|
||||||
|
* @author Jane Smith <jane@example.com>
|
||||||
|
*/
|
||||||
|
function calculateArea(width, height) {
|
||||||
|
if (typeof width !== 'number' || typeof height !== 'number') {
|
||||||
|
throw new TypeError('Width and height must be numbers');
|
||||||
|
}
|
||||||
|
return width * height;
|
||||||
|
}`,
|
||||||
|
description: "Complete function documentation with all common tags",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "Class Example",
|
||||||
|
syntax: "Complete class documentation",
|
||||||
|
example: `/**
|
||||||
|
* Represents a user in the system
|
||||||
|
* @class User
|
||||||
|
* @param {string} name - The user's name
|
||||||
|
* @param {string} email - The user's email address
|
||||||
|
* @example
|
||||||
|
* const user = new User('John Doe', 'john@example.com');
|
||||||
|
* console.log(user.getName()); // 'John Doe'
|
||||||
|
*/
|
||||||
|
class User {
|
||||||
|
/**
|
||||||
|
* Create a user
|
||||||
|
* @constructor
|
||||||
|
* @param {string} name - The user's name
|
||||||
|
* @param {string} email - The user's email address
|
||||||
|
*/
|
||||||
|
constructor(name, email) {
|
||||||
|
this.name = name;
|
||||||
|
this.email = email;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the user's name
|
||||||
|
* @method getName
|
||||||
|
* @returns {string} The user's name
|
||||||
|
*/
|
||||||
|
getName() {
|
||||||
|
return this.name;
|
||||||
|
}
|
||||||
|
}`,
|
||||||
|
description: "Complete class documentation with constructor and methods",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "Module Example",
|
||||||
|
syntax: "Complete module documentation",
|
||||||
|
example: `/**
|
||||||
|
* User management module
|
||||||
|
* @module UserManagement
|
||||||
|
* @description Handles user creation and deletion
|
||||||
|
* @requires Database
|
||||||
|
* @exports createUser
|
||||||
|
* @exports deleteUser
|
||||||
|
* @example
|
||||||
|
* // Create a user
|
||||||
|
* const user = createUser('John Doe', 'john@example.com');
|
||||||
|
* console.log(user);
|
||||||
|
*
|
||||||
|
* // Delete a user
|
||||||
|
* deleteUser(user.id);
|
||||||
|
*/
|
||||||
|
const Database = require('./Database');
|
||||||
|
|
||||||
|
function createUser(name, email) {
|
||||||
|
// Implementation here
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteUser(userId) {
|
||||||
|
// Implementation here
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
createUser,
|
||||||
|
deleteUser
|
||||||
|
};`,
|
||||||
|
description: "Complete module documentation with dependencies and exports",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
"best-practices": {
|
||||||
|
title: "Best Practices",
|
||||||
|
description: "Guidelines for writing effective JSDoc documentation",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "Consistency",
|
||||||
|
syntax: "Use consistent formatting and style",
|
||||||
|
example:
|
||||||
|
"// Always use the same format for similar tags\n// Good: @param {string} name - User name\n// Good: @param {number} age - User age",
|
||||||
|
description: "Maintain consistent formatting across your documentation",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "Completeness",
|
||||||
|
syntax: "Document all public APIs",
|
||||||
|
example: "// Document all parameters, return values, and exceptions\n// Include examples for complex functions",
|
||||||
|
description: "Ensure all public functions, classes, and modules are documented",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "Clarity",
|
||||||
|
syntax: "Write clear, concise descriptions",
|
||||||
|
example: "// Good: Calculates user age from birth date\n// Bad: Does age stuff",
|
||||||
|
description: "Use clear, descriptive language that explains purpose and behavior",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "Type Safety",
|
||||||
|
syntax: "Always specify types for parameters and returns",
|
||||||
|
example:
|
||||||
|
"// Always include types\n@param {string|null} name - User name or null\n@returns {Promise<User>} Promise resolving to user object",
|
||||||
|
description: "Include detailed type information to improve code reliability",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "Examples",
|
||||||
|
syntax: "Include usage examples for complex functions",
|
||||||
|
example:
|
||||||
|
"/**\n * @example\n * // Basic usage\n * const result = myFunction('input');\n * \n * @example\n * // Advanced usage\n * const result = myFunction('input', { option: true });\n */",
|
||||||
|
description: "Provide practical examples showing how to use the code",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
objects: {
|
||||||
|
title: "Objects & Interfaces",
|
||||||
|
description: "Document object structures, interfaces, and inheritance",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@interface",
|
||||||
|
syntax: "@interface InterfaceName",
|
||||||
|
example: "/**\n * @interface Drawable\n * @description Interface for drawable objects\n */",
|
||||||
|
description: "Documents an interface that classes can implement",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@implements",
|
||||||
|
syntax: "@implements {InterfaceName}",
|
||||||
|
example: "/**\n * @class Circle\n * @implements {Drawable}\n */",
|
||||||
|
description: "Indicates that a class implements an interface",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@extends",
|
||||||
|
syntax: "@extends ParentClass",
|
||||||
|
example: "/**\n * @class ColoredCircle\n * @extends Circle\n */",
|
||||||
|
description: "Documents class inheritance",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@mixin",
|
||||||
|
syntax: "@mixin MixinName",
|
||||||
|
example: "/**\n * @mixin EventEmitter\n * @description Adds event handling capabilities\n */",
|
||||||
|
description: "Documents a mixin that can be mixed into classes",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
documentation: {
|
||||||
|
title: "Documentation Tags",
|
||||||
|
description: "Tags for linking, examples, and additional documentation",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
tag: "@example",
|
||||||
|
syntax: "@example\n// Example code here",
|
||||||
|
example:
|
||||||
|
"/**\n * @example\n * // Basic usage\n * const result = myFunction('test');\n * console.log(result);\n */",
|
||||||
|
description: "Provides usage examples",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@see",
|
||||||
|
syntax: "@see {reference}",
|
||||||
|
example: "/**\n * @see {@link MyClass#method}\n * @see https://example.com/docs\n */",
|
||||||
|
description: "References related documentation or code",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@link",
|
||||||
|
syntax: "{@link reference}",
|
||||||
|
example: "/**\n * Uses {@link MyClass} for processing\n */",
|
||||||
|
description: "Creates inline links to other documentation",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@tutorial",
|
||||||
|
syntax: "@tutorial TutorialName",
|
||||||
|
example: "/**\n * @tutorial getting-started\n */",
|
||||||
|
description: "Links to a tutorial document",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tag: "@todo",
|
||||||
|
syntax: "@todo Description of what needs to be done",
|
||||||
|
example: "/**\n * @todo Add input validation\n * @todo Optimize performance\n */",
|
||||||
|
description: "Documents future improvements or fixes needed",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function JSDocCheatsheet() {
|
||||||
|
const [activeSection, setActiveSection] = useState("basic")
|
||||||
|
const [expandedSections, setExpandedSections] = useState<string[]>(["basic"])
|
||||||
|
|
||||||
|
const toggleSection = (sectionId: string) => {
|
||||||
|
setExpandedSections((prev) =>
|
||||||
|
prev.includes(sectionId) ? prev.filter((id) => id !== sectionId) : [...prev, sectionId],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollToTag = (tag: string) => {
|
||||||
|
const element = document.getElementById(tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-"))
|
||||||
|
if (element) {
|
||||||
|
element.scrollIntoView({ behavior: "smooth", block: "start" })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
{/* Header */}
|
||||||
|
<header className="border-b border-border bg-card/50 backdrop-blur-sm sticky top-0 z-50">
|
||||||
|
<div className="w-full px-6 py-6">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-4xl font-bold text-foreground mb-2">JSDoc Cheatsheet</h1>
|
||||||
|
<p className="text-muted-foreground text-lg">Complete Reference for JavaScript Documentation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="w-full px-6 py-8">
|
||||||
|
<div className="flex gap-8">
|
||||||
|
{/* Sidebar Navigation */}
|
||||||
|
<aside className="w-80 shrink-0">
|
||||||
|
<div className="sticky top-32">
|
||||||
|
<Card className="bg-sidebar border-sidebar-border">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-sidebar-foreground text-lg">Navigation</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<ScrollArea className="h-[calc(100vh-200px)]">
|
||||||
|
<nav className="space-y-1 p-3">
|
||||||
|
{sections.map((section) => {
|
||||||
|
const Icon = section.icon
|
||||||
|
const isExpanded = expandedSections.includes(section.id)
|
||||||
|
const isActive = activeSection === section.id
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={section.id} className="space-y-1">
|
||||||
|
<Button
|
||||||
|
variant={isActive ? "secondary" : "ghost"}
|
||||||
|
className={`w-full justify-between gap-2 ${
|
||||||
|
isActive
|
||||||
|
? "bg-sidebar-primary text-sidebar-primary-foreground hover:bg-sidebar-primary/90"
|
||||||
|
: "text-sidebar-foreground hover:bg-sidebar-accent/10"
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveSection(section.id)
|
||||||
|
toggleSection(section.id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Icon className="h-4 w-4" />
|
||||||
|
{section.title}
|
||||||
|
</div>
|
||||||
|
<ChevronRight
|
||||||
|
className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{isExpanded && section.subsections && (
|
||||||
|
<div className="ml-6 space-y-1">
|
||||||
|
{section.subsections.map((subsection) => (
|
||||||
|
<Button
|
||||||
|
key={subsection}
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="w-full justify-start text-xs text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/5"
|
||||||
|
onClick={() => scrollToTag(subsection)}
|
||||||
|
>
|
||||||
|
{subsection}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</ScrollArea>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="flex-1 min-w-0">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Section Header */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h2 className="text-3xl font-bold text-foreground mb-2">
|
||||||
|
{jsdocData[activeSection as keyof typeof jsdocData]?.title || "Section"}
|
||||||
|
</h2>
|
||||||
|
<p className="text-muted-foreground text-lg">
|
||||||
|
{jsdocData[activeSection as keyof typeof jsdocData]?.description || "Documentation section"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content Cards */}
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{jsdocData[activeSection as keyof typeof jsdocData]?.items.map((item, index) => (
|
||||||
|
<Card
|
||||||
|
key={index}
|
||||||
|
id={item.tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-")}
|
||||||
|
className="border-border hover:shadow-lg transition-shadow hover:border-primary/50"
|
||||||
|
>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<CardTitle className="text-xl text-foreground flex items-center gap-2">
|
||||||
|
<Badge variant="secondary" className="bg-primary text-primary-foreground">
|
||||||
|
{item.tag}
|
||||||
|
</Badge>
|
||||||
|
</CardTitle>
|
||||||
|
</div>
|
||||||
|
<CardDescription className="text-muted-foreground text-base">{item.description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{/* Syntax */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-foreground mb-2">Syntax:</h4>
|
||||||
|
<code className="block bg-muted text-muted-foreground p-3 rounded-md text-sm font-mono">
|
||||||
|
{item.syntax}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Example */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-foreground mb-2">Example:</h4>
|
||||||
|
<pre className="bg-card text-card-foreground p-4 rounded-md text-sm font-mono overflow-x-auto border border-border">
|
||||||
|
<code>{item.example}</code>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)) || []}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="border-t border-border bg-card/50 mt-16">
|
||||||
|
<div className="w-full px-6 py-8">
|
||||||
|
<div className="text-center text-muted-foreground">
|
||||||
|
<p className="mb-2">
|
||||||
|
For more information, visit the{" "}
|
||||||
|
<a
|
||||||
|
href="https://jsdoc.app/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline"
|
||||||
|
>
|
||||||
|
official JSDoc documentation
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm">This cheatsheet covers the most commonly used JSDoc tags and patterns.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
21
components.json
Normal file
21
components.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide"
|
||||||
|
}
|
||||||
11
components/theme-provider.tsx
Normal file
11
components/theme-provider.tsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import {
|
||||||
|
ThemeProvider as NextThemesProvider,
|
||||||
|
type ThemeProviderProps,
|
||||||
|
} from 'next-themes'
|
||||||
|
|
||||||
|
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||||
|
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||||
|
}
|
||||||
46
components/ui/badge.tsx
Normal file
46
components/ui/badge.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
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 badgeVariants = cva(
|
||||||
|
'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
|
||||||
|
secondary:
|
||||||
|
'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
|
||||||
|
destructive:
|
||||||
|
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||||
|
outline:
|
||||||
|
'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'span'> &
|
||||||
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||||
|
const Comp = asChild ? Slot : 'span'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="badge"
|
||||||
|
className={cn(badgeVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants }
|
||||||
59
components/ui/button.tsx
Normal file
59
components/ui/button.tsx
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||||
|
outline:
|
||||||
|
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||||
|
ghost:
|
||||||
|
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||||
|
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||||
|
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||||
|
icon: 'size-9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'button'> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot : 'button'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
92
components/ui/card.tsx
Normal file
92
components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from 'react'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn('leading-none font-semibold', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn('text-muted-foreground text-sm', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn('px-6', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
58
components/ui/scroll-area.tsx
Normal file
58
components/ui/scroll-area.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function ScrollArea({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
data-slot="scroll-area"
|
||||||
|
className={cn('relative', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport
|
||||||
|
data-slot="scroll-area-viewport"
|
||||||
|
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function ScrollBar({
|
||||||
|
className,
|
||||||
|
orientation = 'vertical',
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||||
|
return (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
data-slot="scroll-area-scrollbar"
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
'flex touch-none p-px transition-colors select-none',
|
||||||
|
orientation === 'vertical' &&
|
||||||
|
'h-full w-2.5 border-l border-l-transparent',
|
||||||
|
orientation === 'horizontal' &&
|
||||||
|
'h-2.5 flex-col border-t border-t-transparent',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb
|
||||||
|
data-slot="scroll-area-thumb"
|
||||||
|
className="bg-border relative flex-1 rounded-full"
|
||||||
|
/>
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar }
|
||||||
28
components/ui/separator.tsx
Normal file
28
components/ui/separator.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import * as SeparatorPrimitive from '@radix-ui/react-separator'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = 'horizontal',
|
||||||
|
decorative = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
data-slot="separator"
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator }
|
||||||
6
lib/utils.ts
Normal file
6
lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from 'clsx'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
14
next.config.mjs
Normal file
14
next.config.mjs
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {
|
||||||
|
eslint: {
|
||||||
|
ignoreDuringBuilds: true,
|
||||||
|
},
|
||||||
|
typescript: {
|
||||||
|
ignoreBuildErrors: true,
|
||||||
|
},
|
||||||
|
images: {
|
||||||
|
unoptimized: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default nextConfig
|
||||||
74
package.json
Normal file
74
package.json
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
{
|
||||||
|
"name": "my-v0-project",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "next build",
|
||||||
|
"dev": "next dev",
|
||||||
|
"lint": "next lint",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@hookform/resolvers": "^3.10.0",
|
||||||
|
"@radix-ui/react-accordion": "1.2.2",
|
||||||
|
"@radix-ui/react-alert-dialog": "1.1.4",
|
||||||
|
"@radix-ui/react-aspect-ratio": "1.1.1",
|
||||||
|
"@radix-ui/react-avatar": "1.1.2",
|
||||||
|
"@radix-ui/react-checkbox": "1.1.3",
|
||||||
|
"@radix-ui/react-collapsible": "1.1.2",
|
||||||
|
"@radix-ui/react-context-menu": "2.2.4",
|
||||||
|
"@radix-ui/react-dialog": "1.1.4",
|
||||||
|
"@radix-ui/react-dropdown-menu": "2.1.4",
|
||||||
|
"@radix-ui/react-hover-card": "1.1.4",
|
||||||
|
"@radix-ui/react-label": "2.1.1",
|
||||||
|
"@radix-ui/react-menubar": "1.1.4",
|
||||||
|
"@radix-ui/react-navigation-menu": "1.2.3",
|
||||||
|
"@radix-ui/react-popover": "1.1.4",
|
||||||
|
"@radix-ui/react-progress": "1.1.1",
|
||||||
|
"@radix-ui/react-radio-group": "1.2.2",
|
||||||
|
"@radix-ui/react-scroll-area": "1.2.2",
|
||||||
|
"@radix-ui/react-select": "2.1.4",
|
||||||
|
"@radix-ui/react-separator": "1.1.1",
|
||||||
|
"@radix-ui/react-slider": "1.2.2",
|
||||||
|
"@radix-ui/react-slot": "1.1.1",
|
||||||
|
"@radix-ui/react-switch": "1.1.2",
|
||||||
|
"@radix-ui/react-tabs": "1.1.2",
|
||||||
|
"@radix-ui/react-toast": "1.2.4",
|
||||||
|
"@radix-ui/react-toggle": "1.1.1",
|
||||||
|
"@radix-ui/react-toggle-group": "1.1.1",
|
||||||
|
"@radix-ui/react-tooltip": "1.1.6",
|
||||||
|
"@vercel/analytics": "1.3.1",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "1.0.4",
|
||||||
|
"date-fns": "4.1.0",
|
||||||
|
"embla-carousel-react": "8.5.1",
|
||||||
|
"geist": "^1.3.1",
|
||||||
|
"input-otp": "1.4.1",
|
||||||
|
"lucide-react": "^0.454.0",
|
||||||
|
"next": "14.2.16",
|
||||||
|
"next-themes": "^0.4.6",
|
||||||
|
"react": "^18",
|
||||||
|
"react-day-picker": "9.8.0",
|
||||||
|
"react-dom": "^18",
|
||||||
|
"react-hook-form": "^7.60.0",
|
||||||
|
"react-resizable-panels": "^2.1.7",
|
||||||
|
"recharts": "2.15.4",
|
||||||
|
"sonner": "^1.7.4",
|
||||||
|
"tailwind-merge": "^2.5.5",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"vaul": "^0.9.9",
|
||||||
|
"zod": "3.25.67"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4.1.9",
|
||||||
|
"@types/node": "^22",
|
||||||
|
"@types/react": "^18",
|
||||||
|
"@types/react-dom": "^18",
|
||||||
|
"postcss": "^8.5",
|
||||||
|
"tailwindcss": "^4.1.9",
|
||||||
|
"tw-animate-css": "1.3.3",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
|
}
|
||||||
3004
pnpm-lock.yaml
generated
Normal file
3004
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
8
postcss.config.mjs
Normal file
8
postcss.config.mjs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('postcss-load-config').Config} */
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
'@tailwindcss/postcss': {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default config
|
||||||
BIN
public/placeholder-logo.png
Normal file
BIN
public/placeholder-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
1
public/placeholder-logo.svg
Normal file
1
public/placeholder-logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/placeholder-user.jpg
Normal file
BIN
public/placeholder-user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/placeholder.jpg
Normal file
BIN
public/placeholder.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
1
public/placeholder.svg
Normal file
1
public/placeholder.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
125
styles/globals.css
Normal file
125
styles/globals.css
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: oklch(0.205 0 0);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.97 0 0);
|
||||||
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
--muted: oklch(0.97 0 0);
|
||||||
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
--accent: oklch(0.97 0 0);
|
||||||
|
--accent-foreground: oklch(0.205 0 0);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.922 0 0);
|
||||||
|
--input: oklch(0.922 0 0);
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.145 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.145 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.985 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.396 0.141 25.723);
|
||||||
|
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||||
|
--border: oklch(0.269 0 0);
|
||||||
|
--input: oklch(0.269 0 0);
|
||||||
|
--ring: oklch(0.439 0 0);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(0.269 0 0);
|
||||||
|
--sidebar-ring: oklch(0.439 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-destructive-foreground: var(--destructive-foreground);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"target": "ES6",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user