unreal
unreal
PostsComments
TTCTheo's Typesafe Cult
Created by unreal on 10/2/2023 in #questions
nextjs font loads on local dev environment, but not on production
No description
1 replies
TTCTheo's Typesafe Cult
Created by unreal on 9/15/2023 in #questions
shadcn/ui variant typescript error
does anyone know why this is giving me a typescript error (code compiles fine)? i'm using custom variants of shadcn/ui's badge component like so: 
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",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
        research: "border-transparent bg-green-500/20 text-green-500",
        design: "border-transparent bg-red-500/20 text-red-500",
        development: "border-transparent bg-yellow-500/20 text-yellow-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);
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",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
        research: "border-transparent bg-green-500/20 text-green-500",
        design: "border-transparent bg-red-500/20 text-red-500",
        development: "border-transparent bg-yellow-500/20 text-yellow-500",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);
but for some reason it wont accept the dynamic prop as a variant (both when interpolating like this, or when using {category} which is a string. 
  <Badge key={i} variant={`${category}`} className="capitalize">
        {category}
  </Badge>
  <Badge key={i} variant={`${category}`} className="capitalize">
        {category}
  </Badge>
Type 'string' is not assignable to type '"default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined'.ts(2322)
Type 'string' is not assignable to type '"default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined'.ts(2322)
code works fine whether i interpolate category or not, the typescript intellisense also shows my custom variants as possible options here: 
(property) variant?: "default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined
(property) variant?: "default" | "secondary" | "destructive" | "outline" | "research" | "design" | "development" | null | undefined
4 replies
TTCTheo's Typesafe Cult
Created by unreal on 8/16/2023 in #questions
tailwind linter giving me a wrong warning?
No description
12 replies