Damono 5 months ago ใฑใใฎใใฃใใซ่ใใๅ ๅฎนใใใฝใณใณใซๅ ฑๆใใใใใ ใใฎ
Damono 5 months ago <script lang="ts"> export let variant: | "reaction" | "userMenu" | "modal" | "poll" | "pin" | "channel" | "menu" | "status" | "followList" | "inputSend" | "icon" = "menu"; export let type: "button" | "submit" = "button"; export let disabled = false; export let size: "sm" | "md" | "lg" = "md"; </script> <button {type} {disabled} class={`inline-flex items-center justify-center rounded-md transition ${variant === "reaction" ? "p-1 text-magnum-400 opacity-80 hover:opacity-100 hover:bg-magnum-100" : ""} ${variant === "userMenu" ? "px-3 py-1 rounded-full bg-magnum-200 hover:bg-magnum-300 text-neutral-700 text-sm font-medium" : ""} ${variant === "modal" ? "w-8 h-8 rounded-full bg-neutral-200/70 hover:bg-neutral-300 text-neutral-500 hover:text-neutral-700" : ""} ${variant === "poll" ? "px-4 py-2 border border-neutral-300 rounded-md bg-white hover:bg-neutral-100 text-neutral-600" : ""} ${variant === "pin" ? "px-2 py-1 bg-magnum-100 border border-magnum-300 rounded text-sm hover:bg-magnum-200 text-magnum-600" : ""} ${variant === "channel" ? "px-3 py-2 bg-magnum-500 text-white font-bold rounded-md hover:bg-magnum-600" : ""} ${variant === "menu" ? "px-3 py-1 border border-neutral-200 rounded-md bg-white hover:bg-neutral-100 text-sm text-neutral-700" : ""} ${variant === "status" ? "px-3 py-1 bg-magnum-100 border border-magnum-300 text-magnum-600 rounded text-sm hover:bg-magnum-200" : ""} ${variant === "followList" ? "px-2 py-1 border border-neutral-300 rounded text-sm hover:bg-neutral-100 text-neutral-600" : ""} ${variant === "inputSend" ? "px-3 py-2 bg-magnum-400 text-white rounded-md hover:bg-magnum-500 active:scale-95" : ""} ${variant === "icon" ? `${size === "sm" ? "w-7 h-7" : size === "md" ? "w-9 h-9" : "w-11 h-11"} border border-neutral-300 bg-white hover:bg-neutral-100 text-neutral-600 hover:text-neutral-800 rounded-full` : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} `} > <slot /> </button>
Damono 5 months ago <script lang="ts"> export let variant: | "reaction" | "userMenu" | "modal" | "poll" | "pin" | "channel" | "menu" | "status" | "followList" | "inputSend" = "menu"; export let type: "button" | "submit" = "button"; export let disabled = false; </script> <button {type} {disabled} class={`inline-flex items-center justify-center rounded-md transition ${variant === "reaction" ? "p-1 text-magnum-400 opacity-80 hover:opacity-100 hover:bg-magnum-100" : ""} ${variant === "userMenu" ? "px-3 py-1 rounded-full bg-magnum-200 hover:bg-magnum-300 text-neutral-700 text-sm font-medium" : ""} ${variant === "modal" ? "w-8 h-8 rounded-full bg-neutral-200/70 hover:bg-neutral-300 text-neutral-500 hover:text-neutral-700" : ""} ${variant === "poll" ? "px-4 py-2 border border-neutral-300 rounded-md bg-white hover:bg-neutral-100 text-neutral-600" : ""} ${variant === "pin" ? "px-2 py-1 bg-magnum-100 border border-magnum-300 rounded text-sm hover:bg-magnum-200 text-magnum-600" : ""} ${variant === "channel" ? "px-3 py-2 bg-magnum-500 text-white font-bold rounded-md hover:bg-magnum-600" : ""} ${variant === "menu" ? "px-3 py-1 border border-neutral-200 rounded-md bg-white hover:bg-neutral-100 text-sm text-neutral-700" : ""} ${variant === "status" ? "px-3 py-1 bg-magnum-100 border border-magnum-300 text-magnum-600 rounded text-sm hover:bg-magnum-200" : ""} ${variant === "followList" ? "px-2 py-1 border border-neutral-300 rounded text-sm hover:bg-neutral-100 text-neutral-600" : ""} ${variant === "inputSend" ? "px-3 py-2 bg-magnum-400 text-white rounded-md hover:bg-magnum-500 active:scale-95" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} `} > <slot /> </button>
Damono 5 months ago ใใ <script lang="ts"> export let variant: | "reaction" | "userMenu" | "modal" | "poll" | "pin" | "channel" | "menu" = "menu"; export let type: "button" | "submit" = "button"; export let disabled = false; </script> <button {type} {disabled} class={`inline-flex items-center justify-center rounded-md transition ${variant === "reaction" ? "p-1 text-orange-500 hover:bg-orange-100" : ""} ${variant === "userMenu" ? "px-3 py-1 rounded-full bg-orange-200 hover:bg-orange-300 text-sm font-medium" : ""} ${variant === "modal" ? "w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 text-gray-700" : ""} ${variant === "poll" ? "px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100" : ""} ${variant === "pin" ? "px-2 py-1 bg-orange-100 border border-orange-300 rounded text-sm hover:bg-orange-200" : ""} ${variant === "channel" ? "px-3 py-2 bg-orange-500 text-white font-bold rounded-md hover:bg-orange-600" : ""} ${variant === "menu" ? "px-3 py-1 border border-gray-200 rounded-md hover:bg-gray-100 text-sm" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} `} > <slot /> </button>