daniel-gitea/cgr-next-js
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

change version von span to badge component

Browse Source
This commit is contained in:
Daniel Schulteis
2026-01-30 22:20:18 +01:00
parent a13c40bfc1
commit f26dee782c
3 changed files with 96 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/(backend)/page.tsx
View File

@@ -2,6 +2,7 @@
import ModuleCard from "@/components/ModuleCard";
import StatCard from "@/components/StatCard";
import { Badge } from "@/components/ui/badge";
import { ModuleCategory } from "@/lib/types/dashboard";
import {
BookOpen,
@@ -176,9 +177,9 @@ const Dashboard: React.FC = () => {
</p>
</div>
<div className="flex space-x-3">
<span className="bg-primary/10 text-primary whitespace-nowrap rounded-full px-3 py-1 text-sm font-medium">
<Badge variant="secondary" className="px-2.5 py-0.5 text-sm">
v2.4.0 Live
</span>
</Badge>
</div>
</div>

67
app/(backend)/users/page.tsx
View File

@@ -16,7 +16,7 @@ export default function UsersPage() {
<h1 className="text-3xl font-bold tracking-tight text-foreground">Users</h1>
<p className="text-muted-foreground mt-1">Manage your community members and their permissions.</p>
</div>
<Button variant="default" size="sm" onClick={() => setOpen(true)}>
<Button variant="outline" size="sm" onClick={() => setOpen(true)}>
<Plus />
Add User
</Button>
@@ -52,27 +52,50 @@ export default function UsersPage() {
<tbody className="divide-y divide-border">
{/* Example Row */}
<tr className="hover:bg-muted/20 transition-colors cursor-pointer">
<td className="px-6 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
<div>
<div className="text-sm font-medium text-foreground">John Doe</div>
<div className="text-xs text-muted-foreground">john@example.com</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<span className="text-sm text-muted-foreground">Administrator</span>
</td>
<td className="px-6 py-4">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-500">Active</span>
</td>
<td className="px-6 py-4 text-sm text-muted-foreground">Jan 29, 2026</td>
<td className="px-6 py-4 text-right">
<button className="p-2 hover:bg-muted rounded-full transition-colors">
<MoreVertical className="w-4 h-4 text-muted-foreground" />
</button>
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
<div>
<div className="text-sm font-medium text-foreground">John Doe</div>
<div className="text-xs text-muted-foreground">john@example.com</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<span className="text-sm text-muted-foreground">Administrator</span>
</td>
<td className="px-6 py-4">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-500/10 text-green-500">Active</span>
</td>
<td className="px-6 py-4 text-sm text-muted-foreground">Jan 29, 2026</td>
<td className="px-6 py-4 text-right">
<button className="p-2 hover:bg-muted rounded-full transition-colors">
<MoreVertical className="w-4 h-4 text-muted-foreground" />
</button>
</td>
</tr>
<tr className="hover:bg-muted/20 transition-colors cursor-pointer">
<td className="px-6 py-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">JD</div>
<div>
<div className="text-sm font-medium text-foreground">Ivan Ivanowitsch</div>
<div className="text-xs text-muted-foreground">ivan@example.com</div>
</div>
</div>
</td>
<td className="px-6 py-4">
<span className="text-sm text-muted-foreground">User</span>
</td>
<td className="px-6 py-4">
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-500/10 text-red-500">not active</span>
</td>
<td className="px-6 py-4 text-sm text-muted-foreground">May 20, 2025</td>
<td className="px-6 py-4 text-right">
<button className="p-2 hover:bg-muted rounded-full transition-colors">
<MoreVertical className="w-4 h-4 text-muted-foreground" />
</button>
</td>
</tr>
</tbody>
</table>

48
components/ui/badge.tsx Normal file
View File

@@ -0,0 +1,48 @@
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-full border border-transparent 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: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"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:
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
link: "text-primary underline-offset-4 [a&]:hover:underline",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant = "default",
asChild = false,
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span"
return (
<Comp
data-slot="badge"
data-variant={variant}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
)
}
export { Badge, badgeVariants }