mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-11-05 08:50:38 +01:00
feat: better copy button
This commit is contained in:
TrèsAbhi committed
1 parent
abd63b92a8
commit
94099412b0
3 files changed
+198
-153
No files matched your search
@@ -1,151 +0,0 @@
|
|||||||
import {
|
|
||||||
searchPlayersAcrossRegions,
|
|
||||||
type AccountListWithServer,
|
|
||||||
} from '@blitzkit/core';
|
|
||||||
import strings from '@blitzkit/core/lang/en-US.json';
|
|
||||||
import { Link2Icon, PersonIcon } from '@radix-ui/react-icons';
|
|
||||||
import {
|
|
||||||
Badge,
|
|
||||||
Button,
|
|
||||||
Dialog,
|
|
||||||
Flex,
|
|
||||||
Heading,
|
|
||||||
Spinner,
|
|
||||||
Text,
|
|
||||||
TextField,
|
|
||||||
} from '@radix-ui/themes';
|
|
||||||
import { debounce } from 'lodash-es';
|
|
||||||
import { useCallback, useRef, useState } from 'react';
|
|
||||||
import { stringify } from 'urlon';
|
|
||||||
import type { embedConfigurations } from '../../constants/embeds';
|
|
||||||
import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
|
|
||||||
import { CopyButton } from '../CopyButton';
|
|
||||||
|
|
||||||
interface CopyURLProps {
|
|
||||||
embed: keyof typeof embedConfigurations;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function CopyURL({ embed }: CopyURLProps) {
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
|
||||||
const embedStateStore = EmbedState.useStore();
|
|
||||||
const input = useRef<HTMLInputElement>(null);
|
|
||||||
const [searching, setSearching] = useState(false);
|
|
||||||
const [results, setResults] = useState<AccountListWithServer>([]);
|
|
||||||
const performSearch = useCallback(
|
|
||||||
debounce(async () => {
|
|
||||||
if (!input.current) return;
|
|
||||||
|
|
||||||
const sanitized = input.current.value.trim();
|
|
||||||
|
|
||||||
if (sanitized.length === 0) {
|
|
||||||
setSearching(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const results = await searchPlayersAcrossRegions(sanitized, 12);
|
|
||||||
|
|
||||||
setSearching(false);
|
|
||||||
setResults(results);
|
|
||||||
}, 500),
|
|
||||||
[],
|
|
||||||
);
|
|
||||||
const handleChange = useCallback(() => {
|
|
||||||
if (!input.current) return;
|
|
||||||
|
|
||||||
const sanitized = input.current.value.trim();
|
|
||||||
|
|
||||||
if (sanitized.length === 0) {
|
|
||||||
setSearching(false);
|
|
||||||
setResults([]);
|
|
||||||
} else {
|
|
||||||
setSearching(true);
|
|
||||||
performSearch();
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
||||||
<Dialog.Trigger>
|
|
||||||
<Button>
|
|
||||||
<Link2Icon />
|
|
||||||
Copy URL
|
|
||||||
</Button>
|
|
||||||
</Dialog.Trigger>
|
|
||||||
|
|
||||||
<Dialog.Content width="fit-content">
|
|
||||||
<Flex direction="column">
|
|
||||||
<Heading size="5">Copy URL</Heading>
|
|
||||||
<Text>Search an account to track</Text>
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
<TextField.Root
|
|
||||||
mt="4"
|
|
||||||
style={{ width: '20rem' }}
|
|
||||||
placeholder="Search players..."
|
|
||||||
ref={input}
|
|
||||||
onChange={handleChange}
|
|
||||||
>
|
|
||||||
<TextField.Slot>
|
|
||||||
<PersonIcon />
|
|
||||||
</TextField.Slot>
|
|
||||||
</TextField.Root>
|
|
||||||
|
|
||||||
<Flex justify="center" mt="4">
|
|
||||||
{searching && (
|
|
||||||
<Text color="gray">
|
|
||||||
<Flex align="center" gap="2">
|
|
||||||
<Spinner /> Searching
|
|
||||||
</Flex>
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
{!searching && results.length === 0 && (
|
|
||||||
<Text color="gray">No results</Text>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
{!searching && results.length > 0 && (
|
|
||||||
<Flex justify="center">
|
|
||||||
<Flex
|
|
||||||
direction="column"
|
|
||||||
gap="2"
|
|
||||||
mt="4"
|
|
||||||
width="fit-content"
|
|
||||||
minWidth="75%"
|
|
||||||
>
|
|
||||||
{results.map((result) => (
|
|
||||||
<CopyButton
|
|
||||||
variant="ghost"
|
|
||||||
copy={() => {
|
|
||||||
const state = embedStateStore.getState();
|
|
||||||
const initial = embedStateStore.getInitialState();
|
|
||||||
const shallowState: EmbedStateStore = {};
|
|
||||||
|
|
||||||
Object.entries(state).forEach(([key, value]) => {
|
|
||||||
if (value !== initial[key]) {
|
|
||||||
shallowState[key] = value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const searchParams = new URLSearchParams({
|
|
||||||
id: `${result.account_id}`,
|
|
||||||
state: stringify(shallowState),
|
|
||||||
});
|
|
||||||
|
|
||||||
setDialogOpen(false);
|
|
||||||
|
|
||||||
return `${location.origin}/tools/embed/${embed}/host?${searchParams.toString()}`;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Flex justify="between" width="100%" gap="2">
|
|
||||||
{result.nickname}
|
|
||||||
<Badge>{strings.common.regions.short[result.region]}</Badge>
|
|
||||||
</Flex>
|
|
||||||
</CopyButton>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
import {
|
||||||
|
searchPlayersAcrossRegions,
|
||||||
|
type AccountListItem,
|
||||||
|
type AccountListWithServer,
|
||||||
|
} from '@blitzkit/core';
|
||||||
|
import strings from '@blitzkit/core/lang/en-US.json';
|
||||||
|
import { CaretLeftIcon, Link2Icon, PersonIcon } from '@radix-ui/react-icons';
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
Flex,
|
||||||
|
Heading,
|
||||||
|
Spinner,
|
||||||
|
Text,
|
||||||
|
TextField,
|
||||||
|
} from '@radix-ui/themes';
|
||||||
|
import { debounce } from 'lodash-es';
|
||||||
|
import { useCallback, useRef, useState } from 'react';
|
||||||
|
import { stringify } from 'urlon';
|
||||||
|
import type { embedConfigurations } from '../../constants/embeds';
|
||||||
|
import { EmbedState, type EmbedStateStore } from '../../stores/embedState';
|
||||||
|
import { CopyButton } from '../CopyButton';
|
||||||
|
|
||||||
|
interface GenerateURLProps {
|
||||||
|
embed: keyof typeof embedConfigurations;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GenerateURL({ embed }: GenerateURLProps) {
|
||||||
|
const [searchDialogOpen, setSearchDialogOpen] = useState(false);
|
||||||
|
const [copyDialogOpen, setCopyDialogOpen] = useState(false);
|
||||||
|
const [copyUser, setCopyUser] = useState<AccountListItem | null>(null);
|
||||||
|
const embedStateStore = EmbedState.useStore();
|
||||||
|
const input = useRef<HTMLInputElement>(null);
|
||||||
|
const [searching, setSearching] = useState(false);
|
||||||
|
const [results, setResults] = useState<AccountListWithServer>([]);
|
||||||
|
const performSearch = useCallback(
|
||||||
|
debounce(async () => {
|
||||||
|
if (!input.current) return;
|
||||||
|
|
||||||
|
const sanitized = input.current.value.trim();
|
||||||
|
|
||||||
|
if (sanitized.length === 0) {
|
||||||
|
setSearching(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = await searchPlayersAcrossRegions(sanitized, 12);
|
||||||
|
|
||||||
|
setSearching(false);
|
||||||
|
setResults(results);
|
||||||
|
}, 500),
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
const handleChange = useCallback(() => {
|
||||||
|
if (!input.current) return;
|
||||||
|
|
||||||
|
const sanitized = input.current.value.trim();
|
||||||
|
|
||||||
|
if (sanitized.length === 0) {
|
||||||
|
setSearching(false);
|
||||||
|
setResults([]);
|
||||||
|
} else {
|
||||||
|
setSearching(true);
|
||||||
|
performSearch();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Dialog.Root open={searchDialogOpen} onOpenChange={setSearchDialogOpen}>
|
||||||
|
<Dialog.Trigger>
|
||||||
|
<Button>
|
||||||
|
<Link2Icon />
|
||||||
|
Generate URL
|
||||||
|
</Button>
|
||||||
|
</Dialog.Trigger>
|
||||||
|
|
||||||
|
<Dialog.Content width="fit-content">
|
||||||
|
<Flex direction="column" gap="1">
|
||||||
|
<Heading size="5">Generate URL</Heading>
|
||||||
|
<Text color="gray">Search an account to track</Text>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<TextField.Root
|
||||||
|
mt="4"
|
||||||
|
style={{ width: '20rem' }}
|
||||||
|
placeholder="Search players..."
|
||||||
|
ref={input}
|
||||||
|
onChange={handleChange}
|
||||||
|
>
|
||||||
|
<TextField.Slot>
|
||||||
|
<PersonIcon />
|
||||||
|
</TextField.Slot>
|
||||||
|
</TextField.Root>
|
||||||
|
|
||||||
|
<Flex justify="center" my="6">
|
||||||
|
{searching && (
|
||||||
|
<Text color="gray">
|
||||||
|
<Flex align="center" gap="2">
|
||||||
|
<Spinner /> Searching
|
||||||
|
</Flex>
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
{!searching && results.length === 0 && (
|
||||||
|
<Text color="gray">No results</Text>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!searching && results.length > 0 && (
|
||||||
|
<Flex direction="column" gap="2" width="100%">
|
||||||
|
{results.map((result) => (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => {
|
||||||
|
setCopyUser(result);
|
||||||
|
setCopyDialogOpen(true);
|
||||||
|
setSearchDialogOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Flex justify="between" width="100%" gap="2">
|
||||||
|
{result.nickname}
|
||||||
|
<Badge>
|
||||||
|
{strings.common.regions.short[result.region]}
|
||||||
|
</Badge>
|
||||||
|
</Flex>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Dialog.Close>
|
||||||
|
<Button color="red" variant="outline" style={{ width: '100%' }}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Dialog.Close>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
|
||||||
|
<Dialog.Root open={copyDialogOpen} onOpenChange={setCopyDialogOpen}>
|
||||||
|
<Dialog.Content style={{ width: 'fit-content' }}>
|
||||||
|
<Flex direction="column" gap="1">
|
||||||
|
<Heading size="5">Copy URL</Heading>
|
||||||
|
<Text color="gray">
|
||||||
|
Generated the URL for {copyUser?.nickname}. The embed will start
|
||||||
|
tracking as soon as the URL is pasted. Reset at any time by
|
||||||
|
right-clicking on PC or long-pressing on mobile and then selecting
|
||||||
|
"Reset".
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
<Flex gap="2" mt="4">
|
||||||
|
<Button
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setCopyDialogOpen(false);
|
||||||
|
setSearchDialogOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CaretLeftIcon /> Search
|
||||||
|
</Button>
|
||||||
|
<CopyButton
|
||||||
|
style={{ flex: 1 }}
|
||||||
|
copy={() => {
|
||||||
|
if (!copyUser) return;
|
||||||
|
|
||||||
|
const state = embedStateStore.getState();
|
||||||
|
const initial = embedStateStore.getInitialState();
|
||||||
|
const shallowState: EmbedStateStore = {};
|
||||||
|
|
||||||
|
Object.entries(state).forEach(([key, value]) => {
|
||||||
|
if (value !== initial[key]) {
|
||||||
|
shallowState[key] = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const searchParams = new URLSearchParams({
|
||||||
|
id: `${copyUser.account_id}`,
|
||||||
|
state: stringify(shallowState),
|
||||||
|
});
|
||||||
|
|
||||||
|
setSearchDialogOpen(false);
|
||||||
|
setCopyDialogOpen(false);
|
||||||
|
|
||||||
|
return `${location.origin}/tools/embed/${embed}/host?${searchParams.toString()}`;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Link2Icon /> Copy URL
|
||||||
|
</CopyButton>
|
||||||
|
</Flex>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Root>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -13,8 +13,8 @@ import { useEffect, useRef, useState, type ReactNode } from 'react';
|
|||||||
import { CopyButton } from '../../../../components/CopyButton';
|
import { CopyButton } from '../../../../components/CopyButton';
|
||||||
import { Boolean } from '../../../../components/Embeds/Boolean';
|
import { Boolean } from '../../../../components/Embeds/Boolean';
|
||||||
import { Color } from '../../../../components/Embeds/Color';
|
import { Color } from '../../../../components/Embeds/Color';
|
||||||
import { CopyURL } from '../../../../components/Embeds/CopyURL';
|
|
||||||
import { Enum } from '../../../../components/Embeds/Enum';
|
import { Enum } from '../../../../components/Embeds/Enum';
|
||||||
|
import { GenerateURL } from '../../../../components/Embeds/GenerateURL';
|
||||||
import { Import } from '../../../../components/Embeds/Import';
|
import { Import } from '../../../../components/Embeds/Import';
|
||||||
import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
|
import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
|
||||||
import { Radius } from '../../../../components/Embeds/Radius';
|
import { Radius } from '../../../../components/Embeds/Radius';
|
||||||
@@ -90,7 +90,7 @@ function Content({ embed }: PageProps) {
|
|||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Flex mb="6" gap="2" wrap="wrap">
|
<Flex mb="6" gap="2" wrap="wrap">
|
||||||
<CopyURL embed={embed} />
|
<GenerateURL embed={embed} />
|
||||||
<CopyButton
|
<CopyButton
|
||||||
variant="outline"
|
variant="outline"
|
||||||
copy={() =>
|
copy={() =>
|
||||||
|
|||||||
Reference in new issue
Block a user