form 1 topics added
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type HTMLAttributes } from "react";
|
||||
|
||||
type BadgeVariant = "default" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6";
|
||||
type BadgeVariant = "default" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6" | "unit-7" | "unit-8";
|
||||
|
||||
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
||||
variant?: BadgeVariant;
|
||||
@@ -15,6 +15,8 @@ const variantStyles: Record<BadgeVariant, string> = {
|
||||
"unit-4": "border border-unit-4/20 bg-unit-4-light text-unit-4-dark",
|
||||
"unit-5": "border border-unit-5/20 bg-unit-5-light text-unit-5-dark",
|
||||
"unit-6": "border border-unit-6/20 bg-unit-6-light text-unit-6-dark",
|
||||
"unit-7": "border border-unit-7/20 bg-unit-7-light text-unit-7-dark",
|
||||
"unit-8": "border border-unit-8/20 bg-unit-8-light text-unit-8-dark",
|
||||
};
|
||||
|
||||
export function Badge({ variant = "default", className, children, ...props }: BadgeProps) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { type ButtonHTMLAttributes } from "react";
|
||||
|
||||
type ButtonVariant = "primary" | "secondary" | "ghost" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5";
|
||||
type ButtonVariant = "primary" | "secondary" | "ghost" | "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6" | "unit-7" | "unit-8";
|
||||
type ButtonSize = "sm" | "md" | "lg";
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
@@ -18,6 +18,9 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
"unit-3": "bg-unit-3 text-white shadow-[var(--shadow-sm)] hover:bg-unit-3-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-4": "bg-unit-4 text-white shadow-[var(--shadow-sm)] hover:bg-unit-4-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-5": "bg-unit-5 text-white shadow-[var(--shadow-sm)] hover:bg-unit-5-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-6": "bg-unit-6 text-white shadow-[var(--shadow-sm)] hover:bg-unit-6-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-7": "bg-unit-7 text-white shadow-[var(--shadow-sm)] hover:bg-unit-7-dark hover:shadow-[var(--shadow-lg)]",
|
||||
"unit-8": "bg-unit-8 text-white shadow-[var(--shadow-sm)] hover:bg-unit-8-dark hover:shadow-[var(--shadow-lg)]",
|
||||
};
|
||||
|
||||
const sizeStyles: Record<ButtonSize, string> = {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
|
||||
import { type HTMLAttributes } from "react";
|
||||
|
||||
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
accent?: "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6";
|
||||
accent?: "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5" | "unit-6" | "unit-7" | "unit-8";
|
||||
hover?: boolean;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,8 @@ const accentStyles = {
|
||||
"unit-4": "border-l-4 border-l-unit-4",
|
||||
"unit-5": "border-l-4 border-l-unit-5",
|
||||
"unit-6": "border-l-4 border-l-unit-6",
|
||||
"unit-7": "border-l-4 border-l-unit-7",
|
||||
"unit-8": "border-l-4 border-l-unit-8",
|
||||
};
|
||||
|
||||
export function Card({
|
||||
|
||||
29
components/ui/client-only.tsx
Normal file
29
components/ui/client-only.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useSyncExternalStore, type ReactNode } from "react";
|
||||
|
||||
const emptySubscribe = () => () => {};
|
||||
|
||||
/**
|
||||
* Renders its children only after hydration on the client. Use this to wrap UI
|
||||
* whose initial render is non-deterministic (e.g. seeded with Math.random()),
|
||||
* which would otherwise cause a server/client hydration mismatch. The
|
||||
* `fallback` is shown during SSR and the first (hydrating) client render.
|
||||
*
|
||||
* Uses useSyncExternalStore rather than a mount effect so there is no
|
||||
* setState-in-effect and the server/client snapshots stay explicit.
|
||||
*/
|
||||
export function ClientOnly({
|
||||
children,
|
||||
fallback = null,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
}) {
|
||||
const isServer = useSyncExternalStore(
|
||||
emptySubscribe,
|
||||
() => false,
|
||||
() => true,
|
||||
);
|
||||
return <>{isServer ? fallback : children}</>;
|
||||
}
|
||||
Reference in New Issue
Block a user