Arnab-Afk/nextplacement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AI slop goes brr

Browse Source
This commit is contained in:
Anushlinux
2025-07-03 01:11:57 +05:30
parent afd9bb194a
commit ef98f8e1ba
13 changed files with 799 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/ui/package.json
View File

@@ -8,8 +8,10 @@
},
"dependencies": {
"@hookform/resolvers": "^5.1.1",
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-navigation-menu": "^1.2.13",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-progress": "^1.1.7",
"@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-separator": "^1.1.7",

56
packages/ui/src/components/accordion.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client"
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { cn } from "@workspace/ui/lib/utils"
const Accordion = AccordionPrimitive.Root
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b-0", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>span:last-child]:rotate-180",
className
)}
{...props}
>
{children}
<span className="h-4 w-4 shrink-0 transition-transform duration-200">▼</span>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

36
packages/ui/src/components/badge.tsx Normal file
View File

@@ -0,0 +1,36 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@workspace/ui/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}
export { Badge, badgeVariants }

121
packages/ui/src/components/dialog.tsx Normal file
View File

@@ -0,0 +1,121 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { cn } from "@workspace/ui/lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<span className="text-2xl font-thin" aria-hidden="true">×</span>
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}

126
packages/ui/src/styles/globals.css
View File

@@ -13,74 +13,39 @@
@custom-variant dark (&:is(.dark *));
:root {
--background: oklch(0.98 0.003 240);
--foreground: oklch(0.12 0.008 240);
--card: oklch(0.96 0.004 240);
--card-foreground: oklch(0.12 0.008 240);
--background: oklch(0.98 0.01 220); /* Soft blue-tinted white */
--foreground: oklch(0.16 0.01 240); /* Slightly deeper text */
--card: oklch(0.96 0.01 220); /* Slight blue card */
--card-foreground: oklch(0.16 0.01 240);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.12 0.008 240);
--primary: oklch(0.35 0.18 240);
--primary-foreground: oklch(0.98 0.003 240);
--secondary: oklch(0.88 0.008 240);
--secondary-foreground: oklch(0.12 0.008 240);
--muted: oklch(0.92 0.006 240);
--muted-foreground: oklch(0.4 0.01 240);
--accent: oklch(0.42 0.22 10);
--accent-foreground: oklch(0.98 0.003 240);
--destructive: oklch(0.45 0.25 15);
--destructive-foreground: oklch(0.98 0.003 240);
--border: oklch(0.86 0.008 240);
--input: oklch(0.94 0.006 240);
--ring: oklch(0.35 0.18 240);
--chart-1: oklch(0.35 0.18 240);
--chart-2: oklch(0.42 0.22 10);
--popover-foreground: oklch(0.16 0.01 240);
--primary: oklch(0.55 0.18 260); /* Vibrant blue */
--primary-foreground: oklch(0.98 0.01 220);
--secondary: oklch(0.92 0.01 120); /* Soft green */
--secondary-foreground: oklch(0.16 0.01 240);
--muted: oklch(0.94 0.01 220);
--muted-foreground: oklch(0.45 0.01 240);
--accent: oklch(0.72 0.18 40); /* Vibrant orange */
--accent-foreground: oklch(0.98 0.01 220);
--destructive: oklch(0.65 0.22 25); /* Strong red */
--destructive-foreground: oklch(0.98 0.01 220);
--border: oklch(0.88 0.01 220);
--input: oklch(0.96 0.01 220);
--ring: oklch(0.55 0.18 260);
--chart-1: oklch(0.55 0.18 260);
--chart-2: oklch(0.72 0.18 40);
--chart-3: oklch(0.38 0.16 260);
--chart-4: oklch(0.4 0.2 350);
--chart-5: oklch(0.36 0.15 220);
--radius: 0.625rem;
--sidebar: oklch(0.94 0.006 240);
--sidebar-foreground: oklch(0.12 0.008 240);
--sidebar-primary: oklch(0.35 0.18 240);
--sidebar-primary-foreground: oklch(0.98 0.003 240);
--sidebar-accent: oklch(0.42 0.22 10);
--sidebar-accent-foreground: oklch(0.98 0.003 240);
--sidebar-border: oklch(0.86 0.008 240);
--sidebar-ring: oklch(0.35 0.18 240);
}
.dark {
--background: oklch(0.06 0.008 240);
--foreground: oklch(0.94 0.004 240);
--card: oklch(0.1 0.01 240);
--card-foreground: oklch(0.94 0.004 240);
--popover: oklch(0.1 0.01 240);
--popover-foreground: oklch(0.94 0.004 240);
--primary: oklch(0.55 0.22 240);
--primary-foreground: oklch(0.06 0.008 240);
--secondary: oklch(0.16 0.01 240);
--secondary-foreground: oklch(0.94 0.004 240);
--muted: oklch(0.12 0.01 240);
--muted-foreground: oklch(0.6 0.01 240);
--accent: oklch(0.62 0.28 10);
--accent-foreground: oklch(0.06 0.008 240);
--destructive: oklch(0.65 0.3 15);
--destructive-foreground: oklch(0.06 0.008 240);
--border: oklch(0.18 0.01 240);
--input: oklch(0.14 0.01 240);
--ring: oklch(0.55 0.22 240);
--chart-1: oklch(0.55 0.22 240);
--chart-2: oklch(0.62 0.28 10);
--chart-3: oklch(0.58 0.2 260);
--chart-4: oklch(0.6 0.25 350);
--chart-5: oklch(0.56 0.18 220);
--sidebar: oklch(0.08 0.01 240);
--sidebar-foreground: oklch(0.94 0.004 240);
--sidebar-primary: oklch(0.55 0.22 240);
--sidebar-primary-foreground: oklch(0.06 0.008 240);
--sidebar-accent: oklch(0.62 0.28 10);
--sidebar-accent-foreground: oklch(0.06 0.008 240);
--sidebar-border: oklch(0.18 0.01 240);
--sidebar-ring: oklch(0.55 0.22 240);
--radius: 0.75rem;
--sidebar: oklch(0.97 0.01 220);
--sidebar-foreground: oklch(0.16 0.01 240);
--sidebar-primary: oklch(0.55 0.18 260);
--sidebar-primary-foreground: oklch(0.98 0.01 220);
--sidebar-accent: oklch(0.72 0.18 40);
--sidebar-accent-foreground: oklch(0.98 0.01 220);
--sidebar-border: oklch(0.88 0.01 220);
--sidebar-ring: oklch(0.55 0.18 260);
}
@theme inline {
@@ -130,3 +95,36 @@
@apply bg-background text-foreground;
}
}
/* Login page creative animation keyframes (red/rose accent theme) */
@keyframes float-slow {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}
@keyframes float-medium {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(30px) scale(1.1); }
}
@keyframes float-fast {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-15px) scale(0.95); }
}
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ripple {
to { opacity: 0; width: 200px; height: 200px; }
}
/* Utility classes for red/rose accent theme */
.animate-float-slow { animation: float-slow 7s ease-in-out infinite; }
.animate-float-medium { animation: float-medium 5s ease-in-out infinite; }
.animate-float-fast { animation: float-fast 3.5s ease-in-out infinite; }
.animate-bounce-slow { animation: bounce-slow 2.5s infinite; }
.animate-fade-in { animation: fade-in 1.2s 0.5s both; }
.animate-ripple { animation: ripple 0.6s linear; }