add button component

src/app/channel/components/createModal.tsx

@@ -2,7 +2,8 @@ import { Dialog, Transition } from "@headlessui/react";
 import { createChannel } from "@libs/storage";
 import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import { AvatarUploader } from "@shared/avatarUploader";
-import { CancelIcon, PlusIcon } from "@shared/icons";
+import { Button } from "@shared/button";
+import { CancelIcon, LoaderIcon, PlusIcon } from "@shared/icons";
 import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
@@ -217,37 +218,13 @@ export function ChannelCreateModal() {
 											</div>
 										</div>
 										<div>
-											<button
-												type="submit"
-												disabled={!isDirty || !isValid}
-												className="inline-flex h-11 w-full transform items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-zinc-100 shadow-button active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-											>
+											<Button preset="large" disabled={!isDirty || !isValid}>
 												{loading ? (
-													<svg
-														className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
-														xmlns="http://www.w3.org/2000/svg"
-														fill="none"
-														viewBox="0 0 24 24"
-													>
-														<title id="loading">Loading</title>
-														<circle
-															className="opacity-25"
-															cx="12"
-															cy="12"
-															r="10"
-															stroke="currentColor"
-															strokeWidth="4"
-														/>
-														<path
-															className="opacity-75"
-															fill="currentColor"
-															d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-														/>
-													</svg>
+													<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
 												) : (
 													"Create channel"
 												)}
-											</button>
+											</Button>
 										</div>
 									</form>
 								</div>