init gitbiome

src/components/ui/alert.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { merge } from '@/lib/utils'
+
+const alertVariants = cva('fixed z-10 top-2 w-full rounded-lg border p-4 flex items-center space-x-2', {
+    variants: {
+        variant: {
+            default: 'text-foreground',
+            destructive:
+                'border-destructive/50 text-destructive-foreground [&>svg]:text-destructive'
+            }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+})
+
+const Alert = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+    <div ref={ref} role='alert' className={merge(alertVariants({ variant }), className)}
+        {...props}
+    />
+))
+Alert.displayName = 'Alert'
+
+const AlertDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={merge('text-sm [&_p]:leading-relaxed', className)}
+        {...props}
+    />
+))
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertDescription }

src/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+
+import { merge } from '@/lib/utils'
+
+const Avatar = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Root ref={ref} className={merge('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+        {...props}
+    />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Image>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Image ref={ref} className={merge('aspect-square h-full w-full', className)}
+        {...props}
+    />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+    React.ElementRef<typeof AvatarPrimitive.Fallback>,
+    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+    <AvatarPrimitive.Fallback ref={ref} className={merge('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+        {...props}
+    />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/background.tsx

@@ -0,0 +1,10 @@
+const Background = ({backgroundColor, theme }: { backgroundColor: string, theme: 'light' | 'dark' }) => {
+    return (
+        <div className='-z-10 absolute m-auto left-0 right-0 top-[7rem] rounded-full blur-3xl w-[66rem] max-w-full h-[33rem] max-h-screen' style={{
+            backgroundColor: backgroundColor,
+            opacity: theme === 'light' ? 0.5 : 0.15
+        }} />
+    )
+}
+
+export { Background }

src/components/ui/badge.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { merge } from '@/lib/utils'
+
+const badgeVariants = cva('inline-flex items-center rounded-full border px-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+    variants: {
+        variant: {
+            default: 'text-foreground',
+            dev: 'border-transparent bg-badge text-badge-foreground'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+})
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+const Badge = ({ className, variant, ...props }: BadgeProps) => {
+    return (
+        <div className={merge(badgeVariants({ variant }), className)} {...props} />
+    )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { merge } from '@/lib/utils'
+
+const buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
+    variants: {
+        variant: {
+            default: 'bg-background/45 text-foreground',
+            destructive: 'bg-destructive text-foreground hover:bg-destructive/90'
+        },
+        size: {
+            default: 'rounded-xl px-4 py-2',
+            sm: 'rounded-xl py-2 px-3',
+            lg: 'rounded-xl py-4 px-12',
+            icon: 'h-10 w-10'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+})
+
+export interface ButtonProps 
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+
+    return (
+        <Comp className={ merge(buttonVariants({ variant, size, className })) } ref={ref}
+            {...props}
+        />
+    )
+})
+
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+
+import { merge } from '@/lib/utils'
+
+const Card = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={merge('rounded-xl border bg-card/40 text-card-foreground shadow', className)}
+        {...props}
+    />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={merge('flex space-x-7 p-6', className)}
+        {...props}
+    />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+    <h3 ref={ref} className={merge('font-semibold leading-none tracking-tight text-2xl', className)}
+        {...props}
+    />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={merge('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={merge('p-6 pt-0', className)}
+        {...props}
+    />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={merge('flex items-center text-sm text-muted-foreground/75 p-6 pt-0', className)}
+        {...props}
+    />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/icon.tsx

@@ -0,0 +1,18 @@
+import { merge } from '@/lib/utils'
+
+interface IconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    color: string
+    viewBox: 'small' | 'big'
+}
+
+const Icon = ({ color, viewBox, children, className }: IconProps) => {
+    return(
+        <svg xmlns='http://www.w3.org/2000/svg' viewBox={`0 0 ${viewBox === 'small' ? '24 24' : '120 120'}`}
+            className={merge(`h-8 w-8`, className )} style={{ fill: color }}
+        >
+            { children }
+        </svg>
+    )
+}
+
+export { Icon }

src/components/ui/progress.tsx

@@ -0,0 +1,23 @@
+'use client'
+ 
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+ 
+import { merge } from '@/lib/utils'
+ 
+const Progress = React.forwardRef<
+    React.ElementRef<typeof ProgressPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, color, ...props }, ref) => (
+    <ProgressPrimitive.Root ref={ref} className={merge('relative h-1 w-full overflow-hidden rounded-full bg-slate-700', className)}
+        {...props}
+    >
+    <ProgressPrimitive.Indicator className='h-full w-full flex-1 transition-all duration-1000 bg-[#1ed760]' style={{ 
+        backgroundColor: color,
+        transform: `translateX(-${100 - (value ?? 0)}%)`
+    }} />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+ 
+export { Progress }

src/components/ui/separator.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { merge } from '@/lib/utils'
+
+const Separator = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={merge('mx-auto bg-border border-t w-11/12', className)}
+        {...props}
+    />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

src/components/ui/skeleton.tsx

@@ -0,0 +1,11 @@
+import { merge } from '@/lib/utils'
+
+const Skeleton = ({className, ...props}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div className={merge('animate-pulse rounded-md bg-muted', className)}
+            {...props}
+        />
+    )
+}
+
+export { Skeleton }

src/components/ui/tooltip.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { merge } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+const TooltipTrigger = TooltipPrimitive.Trigger
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content ref={ref} sideOffset={sideOffset} className={merge('z-50 overflow-hidden rounded-xl bg-muted px-3 py-1 text-sm text-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className)}
+        {...props}
+    />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }