From 470a852f0f583af3622ce7cfab2059334a2275e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yoannis=20S=C3=A1nchez=20Soto?=
Date: Tue, 16 Apr 2024 07:40:09 -0400
Subject: [PATCH] First Commit
---
.editorconfig | 10 +
.eslintignore | 5 +
.eslintrc.json | 30 +++
.gitignore | 41 ++++
.prettierignore | 12 +
.vscode/settings.json | 4 +
LICENCE.md | 21 ++
README.md | 22 ++
app/icon.svg | 10 +
app/layout.tsx | 66 ++++++
app/page.tsx | 143 ++++++++++++
components.json | 15 ++
components/counters/countdown.tsx | 36 +++
components/counters/counters-section.tsx | 58 +++++
components/counters/realtime-countdown.tsx | 42 ++++
components/footer.tsx | 10 +
components/icons.tsx | 41 ++++
components/main-nav.tsx | 41 ++++
components/site-header.tsx | 54 +++++
components/tailwind-indicator.tsx | 14 ++
components/theme-provider.tsx | 9 +
components/theme-toggle.tsx | 23 ++
components/ui/button.tsx | 56 +++++
components/ui/carousel.tsx | 260 +++++++++++++++++++++
components/ui/dialog.tsx | 120 ++++++++++
components/ui/input.tsx | 25 ++
components/ui/label.tsx | 24 ++
components/ui/meteors.tsx | 35 +++
components/ui/progress.tsx | 26 +++
components/ui/scroll-area.tsx | 46 ++++
components/ui/spinning-number.tsx | 104 +++++++++
components/ui/wave-progressbar.tsx | 27 +++
config/site.ts | 14 ++
docs/banner.png | Bin 0 -> 155358 bytes
lib/fonts.ts | 11 +
lib/utils.ts | 6 +
next-env.d.ts | 5 +
next.config.mjs | 18 ++
package.json | 62 +++++
postcss.config.js | 6 +
prettier.config.js | 32 +++
public/favicon.ico | Bin 0 -> 25931 bytes
public/favicon.svg | 10 +
public/google2cd5e5f412650d96.html | 1 +
public/next.svg | 1 +
public/og.png | Bin 0 -> 192774 bytes
public/thirteen.svg | 1 +
public/vercel.svg | 1 +
styles/globals.css | 64 +++++
tailwind.config.js | 85 +++++++
tsconfig.json | 36 +++
tsconfig.tsbuildinfo | 1 +
types/nav.ts | 6 +
53 files changed, 1790 insertions(+)
create mode 100644 .editorconfig
create mode 100644 .eslintignore
create mode 100644 .eslintrc.json
create mode 100644 .gitignore
create mode 100644 .prettierignore
create mode 100644 .vscode/settings.json
create mode 100644 LICENCE.md
create mode 100644 README.md
create mode 100644 app/icon.svg
create mode 100644 app/layout.tsx
create mode 100644 app/page.tsx
create mode 100644 components.json
create mode 100644 components/counters/countdown.tsx
create mode 100644 components/counters/counters-section.tsx
create mode 100644 components/counters/realtime-countdown.tsx
create mode 100644 components/footer.tsx
create mode 100644 components/icons.tsx
create mode 100644 components/main-nav.tsx
create mode 100644 components/site-header.tsx
create mode 100644 components/tailwind-indicator.tsx
create mode 100644 components/theme-provider.tsx
create mode 100644 components/theme-toggle.tsx
create mode 100644 components/ui/button.tsx
create mode 100644 components/ui/carousel.tsx
create mode 100644 components/ui/dialog.tsx
create mode 100644 components/ui/input.tsx
create mode 100644 components/ui/label.tsx
create mode 100644 components/ui/meteors.tsx
create mode 100644 components/ui/progress.tsx
create mode 100644 components/ui/scroll-area.tsx
create mode 100644 components/ui/spinning-number.tsx
create mode 100644 components/ui/wave-progressbar.tsx
create mode 100644 config/site.ts
create mode 100644 docs/banner.png
create mode 100644 lib/fonts.ts
create mode 100644 lib/utils.ts
create mode 100644 next-env.d.ts
create mode 100644 next.config.mjs
create mode 100644 package.json
create mode 100644 postcss.config.js
create mode 100644 prettier.config.js
create mode 100644 public/favicon.ico
create mode 100644 public/favicon.svg
create mode 100644 public/google2cd5e5f412650d96.html
create mode 100644 public/next.svg
create mode 100644 public/og.png
create mode 100644 public/thirteen.svg
create mode 100644 public/vercel.svg
create mode 100644 styles/globals.css
create mode 100644 tailwind.config.js
create mode 100644 tsconfig.json
create mode 100644 tsconfig.tsbuildinfo
create mode 100644 types/nav.ts
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..ae10a5c
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..dc0f9d8
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+dist/*
+.cache
+public
+node_modules
+*.esm.js
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..fe113b7
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,30 @@
+{
+ "$schema": "https://json.schemastore.org/eslintrc",
+ "root": true,
+ "extends": [
+ "next/core-web-vitals",
+ "prettier",
+ "plugin:tailwindcss/recommended"
+ ],
+ "plugins": ["tailwindcss"],
+ "rules": {
+ "@next/next/no-html-link-for-pages": "off",
+ "react/jsx-key": "off",
+ "tailwindcss/no-custom-classname": "off"
+ },
+ "settings": {
+ "tailwindcss": {
+ "callees": ["cn"],
+ "config": "tailwind.config.js"
+ },
+ "next": {
+ "rootDir": ["./"]
+ }
+ },
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx"],
+ "parser": "@typescript-eslint/parser"
+ }
+ ]
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1f612e8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+yarn.lock
+.yarnrc.yml
+.yarn/
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+
+# misc
+.DS_Store
+*.pem
+public/ai-data/
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+.contentlayer
+.env
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..2f73093
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,12 @@
+cache
+.cache
+package.json
+package-lock.json
+public
+CHANGELOG.md
+.yarn
+dist
+node_modules
+.next
+build
+.contentlayer
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..99438eb
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+ "typescript.tsdk": "../../node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
+ "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/LICENCE.md b/LICENCE.md
new file mode 100644
index 0000000..59e4abb
--- /dev/null
+++ b/LICENCE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Yoannis Sánchez Soto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4f9d1dd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,22 @@
+Year Progress 📅
+
+
+📅 New Year Countdown. It shows the remaining days, hours, minutes, and seconds until the new year arrives. 🥳🎉
+
+
+
+year-progress.pages.dev
+
+
+
+
+
+
+## ⚖️ License
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
diff --git a/app/icon.svg b/app/icon.svg
new file mode 100644
index 0000000..c3a718f
--- /dev/null
+++ b/app/icon.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..33a7826
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,66 @@
+import "@/styles/globals.css"
+import { Metadata } from "next"
+
+import { siteConfig } from "@/config/site"
+import { fontSans } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { Meteors } from "@/components/ui/meteors"
+import { Footer } from "@/components/footer"
+import { SiteHeader } from "@/components/site-header"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeProvider } from "@/components/theme-provider"
+
+export const metadata: Metadata = {
+ title: {
+ default: siteConfig.name,
+ template: `%s - ${siteConfig.name}`,
+ },
+ description: siteConfig.description,
+ themeColor: [
+ { media: "(prefers-color-scheme: light)", color: "white" },
+ { media: "(prefers-color-scheme: dark)", color: "black" },
+ ],
+ openGraph: {
+ images: [
+ {
+ url: "https://year-progress.pages.dev/og.png",
+ },
+ ],
+ },
+ icons: {
+ icon: "/favicon.svg",
+ shortcut: "/favicon-16x16.png",
+ apple: "/apple-touch-icon.png",
+ },
+}
+
+interface RootLayoutProps {
+ children: React.ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..fda4a31
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import { FormEvent, useState } from "react"
+import Image from "next/image"
+import imglyRemoveBackground, { Config } from "@imgly/background-removal"
+import { Download, ImageIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Progress } from "@/components/ui/progress"
+
+export default function IndexPage() {
+ const [showDialog, setShowDialog] = useState(false)
+ const [dialogText, setDialogText] = useState("null")
+ const [dialogProgress, setDialogProgress] = useState(0)
+ const [dialogTotal, setDialogTotal] = useState(100)
+
+ const [imageData, setImageData] = useState(null)
+ const [resultData, setResultData] = useState(null)
+
+ const handleDataChange = (e: any) => {
+ const file = e.target.files[0]
+ const url = URL.createObjectURL(file)
+
+ if (file) setImageData(url)
+ }
+
+ const handleDownload = () => {
+ const link = document.createElement("a")
+ link.href = resultData!
+ link.download = resultData!
+ link.click()
+ }
+
+ const remove = (ev: FormEvent) => {
+ ev.preventDefault()
+ let config: Config = {
+ debug: true,
+ publicPath: "http://localhost:3000/ai-data/", // path to the wasm files
+ progress: (key, current, total) => {
+ console.log(`Downloading ${key}: ${current} of ${total}`)
+ setShowDialog(true)
+ setDialogProgress(current)
+ setDialogTotal(total)
+ setDialogText(key)
+
+ if (current === total && key === "compute:inference")
+ setShowDialog(false)
+ },
+ }
+
+ if (imageData) {
+ imglyRemoveBackground(imageData!, config).then((blob: Blob) => {
+ // result is a blob encoded as PNG.
+ // It can be converted to an URL to be used as HTMLImage.src
+ const url = URL.createObjectURL(blob)
+
+ setResultData(url)
+ })
+ }
+ }
+
+ return (
+
+ {/* Form */}
+
+
+ {/* Images */}
+
+ {imageData ? (
+
+ ) : (
+
+
+
+ )}
+ {resultData ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..f8ce0ad
--- /dev/null
+++ b/components.json
@@ -0,0 +1,15 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "default",
+ "tailwind": {
+ "config": "tailwind.config.js",
+ "css": "app/globals.css",
+ "baseColor": "neutral",
+ "cssVariables": true
+ },
+ "rsc": false,
+ "aliases": {
+ "utils": "@/lib/utils",
+ "components": "@/components"
+ }
+}
diff --git a/components/counters/countdown.tsx b/components/counters/countdown.tsx
new file mode 100644
index 0000000..1a5dbe7
--- /dev/null
+++ b/components/counters/countdown.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { SpinningNumber } from "../ui/spinning-number"
+
+type Props = {
+ value: number
+ type?: "seconds" | "minutes" | "custom"
+}
+
+export const Countdown: React.FC = ({ type = "custom", value }) => {
+ const [val, setValue] = useState(value)
+
+ useEffect(() => {
+ if (type !== "custom") {
+ const interval = setInterval(
+ () => {
+ setValue(val - 1)
+ },
+ type === "seconds" ? 1000 : 60000
+ )
+ return () => {
+ clearInterval(interval)
+ }
+ }
+ }, [type, val])
+
+ return (
+
+ )
+}
diff --git a/components/counters/counters-section.tsx b/components/counters/counters-section.tsx
new file mode 100644
index 0000000..b50d3fc
--- /dev/null
+++ b/components/counters/counters-section.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { DateTime } from "luxon"
+
+import { SpinningNumber } from "../ui/spinning-number"
+import WaveProgressbar from "../ui/wave-progressbar"
+import { Countdown } from "./countdown"
+
+export const CounterSection = () => {
+ const now = DateTime.now()
+
+ const startOfYear = DateTime.local().set({ month: 0, day: 1 })
+ const endOfYear = DateTime.local().set({ month: 12, day: 31 })
+ const timeLeft = endOfYear.diff(now, ["days", "hours", "minutes", "seconds"])
+
+ const totalDays = endOfYear.diff(startOfYear).as("days")
+ const daysPassed = now.diff(startOfYear).as("days")
+ const percentageCompleted = (daysPassed / totalDays) * 100
+
+ return (
+ <>
+ {/* Counters */}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/components/counters/realtime-countdown.tsx b/components/counters/realtime-countdown.tsx
new file mode 100644
index 0000000..4cda552
--- /dev/null
+++ b/components/counters/realtime-countdown.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export const RealtimeCountdown = () => {
+ const [timeLeft, setTimeleft] = useState(getTimeLeft())
+
+ function getTimeLeft() {
+ const now = new Date()
+ const endOfYear = new Date(now.getFullYear() + 1, 0, 1) // End of this year
+
+ const difference = endOfYear.getTime() - now.getTime()
+
+ const seconds = Math.floor(difference / 1000)
+ const minutes = Math.floor(seconds / 60)
+ const hours = Math.floor(minutes / 60)
+ const days = Math.floor(hours / 24)
+ const months = Math.floor(days / 30)
+
+ const timeLeft = {
+ months: months,
+ days: days % 30,
+ hours: hours % 24,
+ minutes: minutes % 60,
+ seconds: seconds % 60,
+ }
+
+ return timeLeft
+ }
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTimeleft(getTimeLeft())
+ }, 1000)
+
+ return () => clearInterval(interval)
+ }, [timeLeft])
+
+ return (
+ {`${timeLeft.months} months, ${timeLeft.days} days, ${timeLeft.hours} hours, ${timeLeft.minutes} minutes, ${timeLeft.seconds} seconds`}
+ )
+}
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..a316922
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,10 @@
+export const Footer = () => {
+ return (
+
+ Made by{" "}
+
+ @yossthedev
+
+
+ )
+}
diff --git a/components/icons.tsx b/components/icons.tsx
new file mode 100644
index 0000000..e3c97ba
--- /dev/null
+++ b/components/icons.tsx
@@ -0,0 +1,41 @@
+import {
+ LucideProps,
+ Moon,
+ SunMedium,
+ Twitter,
+ type Icon as LucideIcon,
+} from "lucide-react"
+
+export type Icon = LucideIcon
+
+export const Icons = {
+ sun: SunMedium,
+ moon: Moon,
+ twitter: Twitter,
+ logo: (props: LucideProps) => (
+
+ ),
+ gitHub: (props: LucideProps) => (
+
+ ),
+}
diff --git a/components/main-nav.tsx b/components/main-nav.tsx
new file mode 100644
index 0000000..79e0b88
--- /dev/null
+++ b/components/main-nav.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import Link from "next/link"
+
+import { NavItem } from "@/types/nav"
+import { siteConfig } from "@/config/site"
+import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
+
+interface MainNavProps {
+ items?: NavItem[]
+}
+
+export function MainNav({ items }: MainNavProps) {
+ return (
+
+
+
+ Removerized
+
+ {items?.length ? (
+
+ ) : null}
+
+ )
+}
diff --git a/components/site-header.tsx b/components/site-header.tsx
new file mode 100644
index 0000000..e05ff4c
--- /dev/null
+++ b/components/site-header.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import Link from "next/link"
+
+import { siteConfig } from "@/config/site"
+import { buttonVariants } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+import { MainNav } from "@/components/main-nav"
+import { ThemeToggle } from "@/components/theme-toggle"
+
+export function SiteHeader() {
+ return (
+
+
+
+
+
+
+
+
xs
+
sm
+
md
+
lg
+
xl
+
2xl
+
+ {children}
+
+
+ )
+ }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { carouselRef, orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+ HTMLButtonElement,
+ React.ComponentProps
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+ return (
+
+ )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..c23630e
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..677d05f
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/components/ui/meteors.tsx b/components/ui/meteors.tsx
new file mode 100644
index 0000000..7d995c1
--- /dev/null
+++ b/components/ui/meteors.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import React from "react"
+
+import { cn } from "@/lib/utils"
+
+export const Meteors = ({
+ number,
+ className,
+}: {
+ number?: number
+ className?: string
+}) => {
+ const meteors = new Array(number || 20).fill(true)
+ return (
+ <>
+ {meteors.map((el, idx) => (
+
+ ))}
+
+ )
+}
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..105fb65
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..cf253cf
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+
+
+
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/spinning-number.tsx b/components/ui/spinning-number.tsx
new file mode 100644
index 0000000..127a9a8
--- /dev/null
+++ b/components/ui/spinning-number.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { motion } from "framer-motion"
+
+type SpinningNumberProps = React.DetailedHTMLProps<
+ React.HTMLAttributes,
+ HTMLDivElement
+> & {
+ value: number
+ animationDuration?: number
+}
+
+export const SpinningNumber = ({
+ value,
+ animationDuration = 500,
+ className,
+ ...props
+}: SpinningNumberProps) => {
+ const ref = useRef(null)
+
+ const [splitted, setSplitted] = useState(value.toString().split(""))
+ const [lineHeight, setLineHeight] = useState(0)
+
+ useEffect(() => {
+ const element = ref.current
+ if (element) {
+ const tempElement = document.createElement("span")
+ tempElement.style.fontSize = window.getComputedStyle(element).fontSize
+ tempElement.style.fontFamily = window.getComputedStyle(element).fontFamily
+ tempElement.style.lineHeight = window.getComputedStyle(element).lineHeight
+ tempElement.innerHTML = "dummy"
+ element.appendChild(tempElement)
+ setLineHeight(tempElement.offsetHeight)
+ element.removeChild(tempElement)
+ }
+ }, [lineHeight])
+
+ useEffect(() => {
+ setSplitted(value.toString().split(""))
+ }, [value])
+
+ return (
+
+
+
+ {splitted.map((num, i) => (
+
+ ))}
+
+
+
+
+
+
+