-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c2456d4
commit ecb5000
Showing
9 changed files
with
397 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { Component } from 'solid-js'; | ||
|
|
||
| export const Loading: Component = () => { | ||
| return ( | ||
| <div class="flex items-center justify-center h-screen"> | ||
| <div class="flex flex-col items-center space-y-4"> | ||
| <div class="animate-spin h-20 w-20 rounded-full border-t-2 border-gray-400"></div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import type { Component } from 'solid-js'; | ||
| import { splitProps } from 'solid-js'; | ||
|
|
||
| import { Image as ImagePrimitive } from '@kobalte/core'; | ||
|
|
||
| import { cn } from '~/lib/utils'; | ||
|
|
||
| const Avatar: Component<ImagePrimitive.ImageRootProps> = (props) => { | ||
| const [, rest] = splitProps(props, ['class']); | ||
| return <ImagePrimitive.Root class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', props.class)} {...rest} />; | ||
| }; | ||
|
|
||
| const AvatarImage: Component<ImagePrimitive.ImageImgProps> = (props) => { | ||
| const [, rest] = splitProps(props, ['class']); | ||
| return <ImagePrimitive.Img class={cn('aspect-square h-full w-full', props.class)} {...rest} />; | ||
| }; | ||
|
|
||
| const AvatarFallback: Component<ImagePrimitive.ImageFallbackProps> = (props) => { | ||
| const [, rest] = splitProps(props, ['class']); | ||
| return <ImagePrimitive.Fallback class={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', props.class)} {...rest} />; | ||
| }; | ||
|
|
||
| export { Avatar, AvatarFallback, AvatarImage }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import type { Component, ComponentProps } from 'solid-js'; | ||
| import { splitProps } from 'solid-js'; | ||
|
|
||
| import type { VariantProps } from 'class-variance-authority'; | ||
| import { cva } from 'class-variance-authority'; | ||
|
|
||
| import { cn } from '~/lib/utils'; | ||
|
|
||
| const badgeVariants = cva('focus:ring-ring 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-offset-2', { | ||
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent', | ||
| secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent', | ||
| destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent', | ||
| outline: 'text-foreground', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default', | ||
| }, | ||
| }); | ||
|
|
||
| export interface BadgeProps extends ComponentProps<'div'>, VariantProps<typeof badgeVariants> {} | ||
|
|
||
| const Badge: Component<BadgeProps> = (props) => { | ||
| const [, rest] = splitProps(props, ['variant', 'class']); | ||
| return <div class={cn(badgeVariants({ variant: props.variant }), props.class)} {...rest} />; | ||
| }; | ||
|
|
||
| export { Badge, badgeVariants }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,39 @@ | ||
| import type { Component, ComponentProps } from "solid-js" | ||
| import { splitProps } from "solid-js" | ||
| import type { Component, ComponentProps } from 'solid-js'; | ||
| import { splitProps } from 'solid-js'; | ||
|
|
||
| import type { VariantProps } from "class-variance-authority" | ||
| import { cva } from "class-variance-authority" | ||
| import type { VariantProps } from 'class-variance-authority'; | ||
| import { cva } from 'class-variance-authority'; | ||
|
|
||
| import { cn } from "~/lib/utils" | ||
| import { cn } from '~/lib/utils'; | ||
|
|
||
| const buttonVariants = cva( | ||
| "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: "bg-primary text-primary-foreground hover:bg-primary/90", | ||
| destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", | ||
| outline: "border-input hover:bg-accent hover:text-accent-foreground border", | ||
| secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", | ||
| ghost: "hover:bg-accent hover:text-accent-foreground", | ||
| link: "text-primary underline-offset-4 hover:underline" | ||
| }, | ||
| size: { | ||
| default: "h-10 px-4 py-2", | ||
| sm: "h-9 rounded-md px-3", | ||
| lg: "h-11 rounded-md px-8", | ||
| icon: "h-10 w-10" | ||
| } | ||
| const buttonVariants = cva('ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { | ||
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground hover:bg-primary/90', | ||
| destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', | ||
| outline: 'border-input hover:bg-accent hover:text-accent-foreground border', | ||
| secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', | ||
| ghost: 'hover:bg-accent hover:text-accent-foreground', | ||
| link: 'text-primary underline-offset-4 hover:underline', | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| size: "default" | ||
| } | ||
| } | ||
| ) | ||
| size: { | ||
| default: 'h-10 px-4 py-2', | ||
| sm: 'h-9 rounded-md px-3', | ||
| lg: 'h-11 rounded-md px-8', | ||
| icon: 'h-10 w-10', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default', | ||
| size: 'default', | ||
| }, | ||
| }); | ||
|
|
||
| export interface ButtonProps | ||
| extends ComponentProps<"button">, | ||
| VariantProps<typeof buttonVariants> {} | ||
| export interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {} | ||
|
|
||
| const Button: Component<ButtonProps> = (props) => { | ||
| const [, rest] = splitProps(props, ["variant", "size", "class"]) | ||
| return ( | ||
| <button | ||
| class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)} | ||
| {...rest} | ||
| /> | ||
| ) | ||
| } | ||
| const [, rest] = splitProps(props, ['variant', 'size', 'class']); | ||
| return <button class={cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)} {...rest} />; | ||
| }; | ||
|
|
||
| export { Button, buttonVariants } | ||
| export { Button, buttonVariants }; |
Oops, something went wrong.