mei/short-url
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mei 2024-11-26 12:45:06 +08:00
commit 03c76dae5c
25 changed files with 6194 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": ["next/core-web-vitals", "next/typescript"]
}

40
.gitignore vendored Normal file
View File

@ -0,0 +1,40 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
.env
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
# DB
shorturl.db

36
README.md Normal file
View File

@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

24
app/api/shorten/route.ts Normal file
View File

@ -0,0 +1,24 @@
import { NextResponse } from 'next/server';
import { createShortUrl } from '@/lib/db';
export async function POST(request: Request) {
const { url, expiresIn } = await request.json();
if (!url) {
return NextResponse.json({ error: 'URL is required' }, { status: 400 });
}
if (!expiresIn || typeof expiresIn !== 'number') {
return NextResponse.json({ error: 'Valid expiration time is required' }, { status: 400 });
}
try {
const shortCode = createShortUrl(url, expiresIn);
const shortUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/s/${shortCode}`;
return NextResponse.json({ shortUrl });
} catch (error) {
console.error('Error creating short URL:', error);
return NextResponse.json({ error: 'Failed to create short URL' }, { status: 500 });
}
}

17
app/api/url/[shortCode]/route.ts Normal file
View File

@ -0,0 +1,17 @@
import { NextResponse } from 'next/server';
import { getLongUrl, getUrlStats } from '@/lib/db';
export async function GET(
request: Request,
{ params }: { params: { shortCode: string } }
) {
const { longUrl, expired } = getLongUrl(params.shortCode);
const stats = getUrlStats(params.shortCode);
if (longUrl) {
return NextResponse.json({ longUrl, expired, stats });
} else {
return NextResponse.json({ longUrl: null, expired, stats: null }, { status: 404 });
}
}

BIN
app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
app/fonts/GeistMonoVF.woff Normal file
View File

Binary file not shown.

BIN
app/fonts/GeistVF.woff Normal file
View File

Binary file not shown.

78
app/globals.css Normal file
View File

@ -0,0 +1,78 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

35
app/layout.tsx Normal file
View File

@ -0,0 +1,35 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

22
app/page.tsx Normal file
View File

@ -0,0 +1,22 @@
import ShortUrlForm from '@/components/ShortUrlForm'
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-r from-cyan-500 to-blue-500 p-4">
<div className="w-full max-w-md">
<h1 className="mb-8 text-center text-4xl font-bold text-white">URL Shortener</h1>
<ShortUrlForm />
<div className="mt-8 text-center text-sm text-white">
<p>Short links now include visit tracking and expiration!</p>
<p className="mt-2">
Report abusive content to:{' '}
<a href="mailto:report@example.com" className="underline">
report@example.com
</a>
</p>
</div>
</div>
</main>
)
}

135
app/s/[shortCode]/page.tsx Normal file
View File

@ -0,0 +1,135 @@
import { getLongUrl, getUrlStats } from '@/lib/db'
import Redirect from '@/components/Redirect'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Clock, Link, BarChart2, AlertTriangle } from 'lucide-react'
export default async function RedirectPage({ params }: { params: { shortCode: string } }) {
const { longUrl, expired } = getLongUrl(params.shortCode)
const stats = getUrlStats(params.shortCode)
if (longUrl && stats) {
return (
<>
<Redirect url={longUrl} />
<LandingPage
longUrl={longUrl}
shortCode={params.shortCode}
visits={stats.visits}
expiresAt={stats.expiresAt}
/>
</>
)
}
return (
<div className="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center p-4">
<Card className="w-full max-w-md">
<CardHeader>
<CardTitle className="text-2xl text-center text-red-600">
{expired ? 'Link Expired' : 'Link Not Found'}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-center text-gray-600 mb-6">
{expired
? 'Sorry, this short link has expired.'
: 'The requested short link does not exist.'}
</p>
<div className="text-center">
<a
href="/"
className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 transform hover:scale-105"
>
Create a New Short Link
</a>
</div>
</CardContent>
<CardFooter className="justify-center">
<p className="text-sm text-gray-500">
Report abusive content:{' '}
<a href="mailto:report@example.com" className="text-blue-500 hover:underline">
report@example.com
</a>
</p>
</CardFooter>
</Card>
</div>
)
}
function LandingPage({ longUrl, shortCode, visits, expiresAt }: {
longUrl: string
shortCode: string
visits: number
expiresAt: string | null
}) {
return (
<div className="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 flex items-center justify-center p-4">
<Card className="w-full max-w-2xl">
<CardHeader>
<CardTitle className="text-2xl font-bold text-center text-blue-800">
You are being redirected
</CardTitle>
<CardDescription className="text-center text-gray-600">
You will be redirected to your destination in 5 seconds.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<Progress value={100} className="w-full h-2 bg-blue-200" />
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center space-x-2">
<Link className="text-blue-600" />
<p className="text-sm text-gray-600">
Short URL: <span className="font-medium">{`${process.env.NEXT_PUBLIC_BASE_URL}/s/${shortCode}`}</span>
</p>
</div>
<div className="flex items-center space-x-2">
<BarChart2 className="text-green-600" />
<p className="text-sm text-gray-600">
Visits: <span className="font-medium">{visits}</span>
</p>
</div>
<div className="flex items-center space-x-2">
<Link className="text-purple-600" />
<p className="text-sm text-gray-600">
Destination: <span className="font-medium">{longUrl}</span>
</p>
</div>
<div className="flex items-center space-x-2">
<Clock className="text-orange-600" />
<p className="text-sm text-gray-600">
Expires at: <span className="font-medium">{expiresAt ? new Date(expiresAt).toLocaleString() : 'Never'}</span>
</p>
</div>
</div>
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<div className="flex items-center space-x-2 mb-2">
<AlertTriangle className="text-yellow-600" />
<h2 className="font-bold text-yellow-800">Disclaimer</h2>
</div>
<p className="text-sm text-yellow-800">
This link will take you to an external website. We are not responsible for the content
of external sites. Please proceed with caution.
</p>
</div>
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
<h2 className="font-bold text-gray-800 mb-2">Advertisement</h2>
<p className="text-sm text-gray-600">
This could be your ad! Contact us for advertising opportunities.
</p>
</div>
</CardContent>
<CardFooter className="justify-center">
<p className="text-sm text-gray-500">
Report abusive content:{' '}
<a href="mailto:report@example.com" className="text-blue-500 hover:underline">
report@example.com
</a>
</p>
</CardFooter>
</Card>
</div>
)
}

21
components.json Normal file
View File

@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}

29
components/Redirect.tsx Normal file
View File

@ -0,0 +1,29 @@
'use client'
import { useEffect, useState } from 'react'
import { Progress } from "@/components/ui/progress"
export default function Redirect({ url }: { url: string }) {
const [progress, setProgress] = useState(0)
useEffect(() => {
const timer = setInterval(() => {
setProgress((oldProgress) => {
if (oldProgress === 100) {
clearInterval(timer)
window.location.href = url
return 100
}
const diff = 100 / 50 // 50 steps for 5 seconds
return Math.min(oldProgress + diff, 100)
})
}, 100)
return () => clearInterval(timer)
}, [url])
return (
<Progress value={progress} className="w-full h-2 bg-blue-200 fixed top-0 left-0 z-50" />
)
}

106
components/ShortUrlForm.tsx Normal file
View File

@ -0,0 +1,106 @@
'use client'
import { useState } from 'react'
export default function ShortUrlForm() {
const [longUrl, setLongUrl] = useState('')
const [shortUrl, setShortUrl] = useState('')
const [expiresIn, setExpiresIn] = useState('3600') // 默认1小时
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState('')
const generateShortUrl = async (e: React.FormEvent) => {
e.preventDefault()
setIsLoading(true)
setError('')
try {
const response = await fetch('/api/shorten', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ url: longUrl, expiresIn: parseInt(expiresIn) }),
})
if (!response.ok) {
throw new Error('Failed to create short URL')
}
const data = await response.json()
setShortUrl(data.shortUrl)
} catch (err) {
setError('An error occurred while creating the short URL')
console.error(err)
} finally {
setIsLoading(false)
}
}
return (
<div className="bg-white rounded-lg shadow-md p-6">
<form onSubmit={generateShortUrl} className="space-y-4">
<div>
<label htmlFor="longUrl" className="block text-sm font-medium text-gray-700">
Enter your long URL
</label>
<input
type="url"
id="longUrl"
value={longUrl}
onChange={(e) => setLongUrl(e.target.value)}
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="https://example.com/very/long/url"
/>
</div>
<div>
<label htmlFor="expiresIn" className="block text-sm font-medium text-gray-700">
Link expiration time
</label>
<select
id="expiresIn"
value={expiresIn}
onChange={(e) => setExpiresIn(e.target.value)}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
>
<option value="3600">1 hour</option>
<option value="86400">1 day</option>
<option value="604800">1 week</option>
<option value="2592000">1 month</option>
<option value="31536000">1 year</option>
<option value="0">Never (permanent)</option>
</select>
</div>
<button
type="submit"
disabled={isLoading}
className="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 disabled:bg-blue-300"
>
{isLoading ? 'Creating...' : 'Shorten URL'}
</button>
</form>
{error && (
<div className="mt-4 p-2 bg-red-100 border border-red-400 text-red-700 rounded">
{error}
</div>
)}
{shortUrl && (
<div className="mt-6">
<h2 className="text-lg font-semibold text-gray-700">Your shortened URL:</h2>
<div className="mt-2 p-4 bg-gray-100 rounded-md">
<a
href={shortUrl}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:underline break-all"
>
{shortUrl}
</a>
</div>
</div>
)}
</div>
)
}

80
components/ui/card.tsx Normal file
View File

@ -0,0 +1,80 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

29
components/ui/progress.tsx Normal file
View File

@ -0,0 +1,29 @@
"use client"
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import { cn } from "@/lib/utils"
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
className
)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName
export { Progress }

70
lib/db.ts Normal file
View File

@ -0,0 +1,70 @@
import Database from 'better-sqlite3';
import { nanoid } from 'nanoid';
const db = new Database('shorturl.db');
// 创建表（如果不存在）
db.exec(`
CREATE TABLE IF NOT EXISTS urls (
id INTEGER PRIMARY KEY AUTOINCREMENT,
short_code TEXT UNIQUE,
long_url TEXT NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
visits INTEGER DEFAULT 0,
expires_at DATETIME
)
`);
// 定义接口
interface UrlResult {
long_url: string;
expires_at: string | null;
}
interface UrlStats {
visits: number;
expires_at: string | null;
}
// 创建短链接
export function createShortUrl(longUrl: string, expiresIn: number): string {
const shortCode = nanoid(6);
const expiresAt = expiresIn === 0 ? null : new Date(Date.now() + expiresIn * 1000).toISOString();
const stmt = db.prepare('INSERT INTO urls (short_code, long_url, expires_at) VALUES (?, ?, ?)');
stmt.run(shortCode, longUrl, expiresAt);
return shortCode;
}
// 获取长链接
export function getLongUrl(shortCode: string): { longUrl: string | null, expired: boolean } {
const stmt = db.prepare('SELECT long_url, expires_at FROM urls WHERE short_code = ?');
const result: UrlResult | undefined = stmt.get(shortCode) as UrlResult | undefined;
if (!result) {
return { longUrl: null, expired: false };
}
if (result.expires_at === null) {
db.prepare('UPDATE urls SET visits = visits + 1 WHERE short_code = ?').run(shortCode);
return { longUrl: result.long_url, expired: false };
}
const now = new Date();
const expiresAt = new Date(result.expires_at);
if (expiresAt < now) {
return { longUrl: null, expired: true };
}
db.prepare('UPDATE urls SET visits = visits + 1 WHERE short_code = ?').run(shortCode);
return { longUrl: result.long_url, expired: false };
}
// 获取链接统计信息
export function getUrlStats(shortCode: string): { visits: number, expiresAt: string | null } | null {
const stmt = db.prepare('SELECT visits, expires_at FROM urls WHERE short_code = ?');
const result: UrlStats | undefined = stmt.get(shortCode) as UrlStats | undefined;
return result ? { visits: result.visits, expiresAt: result.expires_at } : null;
}

6
lib/utils.ts Normal file
View 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))
}

4
next.config.mjs Normal file
View File

@ -0,0 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;

5327
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

35
package.json Normal file
View File

@ -0,0 +1,35 @@
{
"name": "short-url",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@radix-ui/react-progress": "^1.1.0",
"better-sqlite3": "^11.6.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.461.0",
"nanoid": "^5.0.8",
"next": "14.2.16",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/better-sqlite3": "^7.6.12",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.16",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

8
postcss.config.mjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

63
tailwind.config.ts Normal file
View File

@ -0,0 +1,63 @@
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
}
}
},
plugins: [require("tailwindcss-animate")],
};
export default config;

26
tsconfig.json Normal file
View File

@ -0,0 +1,26 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"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"]
}