chore: running format
This commit is contained in:
@@ -4,105 +4,105 @@ import { IconSearch, IconRefresh } from "@tabler/icons-solidjs";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Emoji = {
|
||||
emoji: string;
|
||||
name: string;
|
||||
emoji: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [options, setOptions] = createSignal<Emoji[]>([]);
|
||||
const [emoji, setEmoji] = createSignal<Emoji | null>(null);
|
||||
const [options, setOptions] = createSignal<Emoji[]>([]);
|
||||
const [emoji, setEmoji] = createSignal<Emoji | null>(null);
|
||||
|
||||
const emojiData: Emoji[] = [
|
||||
{ emoji: "😀", name: "Grinning Face" },
|
||||
{ emoji: "😃", name: "Grinning Face with Big Eyes" },
|
||||
{ emoji: "😄", name: "Grinning Face with Smiling Eyes" },
|
||||
{ emoji: "😁", name: "Beaming Face with Smiling Eyes" },
|
||||
{ emoji: "😆", name: "Grinning Squinting Face" },
|
||||
];
|
||||
const emojiData: Emoji[] = [
|
||||
{ emoji: "😀", name: "Grinning Face" },
|
||||
{ emoji: "😃", name: "Grinning Face with Big Eyes" },
|
||||
{ emoji: "😄", name: "Grinning Face with Smiling Eyes" },
|
||||
{ emoji: "😁", name: "Beaming Face with Smiling Eyes" },
|
||||
{ emoji: "😆", name: "Grinning Squinting Face" },
|
||||
];
|
||||
|
||||
const queryEmojiData = (query: string) => {
|
||||
return emojiData.filter((emoji) =>
|
||||
emoji.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
};
|
||||
const queryEmojiData = (query: string) => {
|
||||
return emojiData.filter((emoji) =>
|
||||
emoji.name.toLowerCase().includes(query.toLowerCase()),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<main class="container pt-2">
|
||||
<div class="px-4">
|
||||
<Search
|
||||
triggerMode="focus"
|
||||
options={options()}
|
||||
onInputChange={(query) => setOptions(queryEmojiData(query))}
|
||||
onChange={(result) => setEmoji(result)}
|
||||
optionValue="name"
|
||||
optionLabel="name"
|
||||
placeholder="Search for stuff..."
|
||||
itemComponent={(props) => (
|
||||
<Search.Item
|
||||
item={props.item}
|
||||
class={clsx(
|
||||
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
|
||||
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none"
|
||||
)}
|
||||
>
|
||||
<Search.ItemLabel class="mx-[-100px]">
|
||||
{props.item.rawValue.emoji}
|
||||
</Search.ItemLabel>
|
||||
</Search.Item>
|
||||
)}
|
||||
>
|
||||
<Search.Control
|
||||
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
|
||||
aria-label="Emoji"
|
||||
>
|
||||
<Search.Indicator
|
||||
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
|
||||
loadingComponent={
|
||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||
<IconRefresh size={20} class="m-auto animate-spin" />
|
||||
</Search.Icon>
|
||||
}
|
||||
>
|
||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||
<IconSearch class="m-auto size-5 text-gray-600" />
|
||||
</Search.Icon>
|
||||
</Search.Indicator>
|
||||
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
|
||||
</Search.Control>
|
||||
<Search.Portal>
|
||||
<Search.Content
|
||||
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
|
||||
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
|
||||
😬 No emoji found
|
||||
</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
</Search>
|
||||
</div>
|
||||
{/* <div class="mt-4 text-base leading-none">
|
||||
return (
|
||||
<main class="container pt-2">
|
||||
<div class="px-4">
|
||||
<Search
|
||||
triggerMode="focus"
|
||||
options={options()}
|
||||
onInputChange={(query) => setOptions(queryEmojiData(query))}
|
||||
onChange={(result) => setEmoji(result)}
|
||||
optionValue="name"
|
||||
optionLabel="name"
|
||||
placeholder="Search for stuff..."
|
||||
itemComponent={(props) => (
|
||||
<Search.Item
|
||||
item={props.item}
|
||||
class={clsx(
|
||||
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
|
||||
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none",
|
||||
)}
|
||||
>
|
||||
<Search.ItemLabel class="mx-[-100px]">
|
||||
{props.item.rawValue.emoji}
|
||||
</Search.ItemLabel>
|
||||
</Search.Item>
|
||||
)}
|
||||
>
|
||||
<Search.Control
|
||||
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
|
||||
aria-label="Emoji"
|
||||
>
|
||||
<Search.Indicator
|
||||
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
|
||||
loadingComponent={
|
||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||
<IconRefresh size={20} class="m-auto animate-spin" />
|
||||
</Search.Icon>
|
||||
}
|
||||
>
|
||||
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
|
||||
<IconSearch class="m-auto size-5 text-gray-600" />
|
||||
</Search.Icon>
|
||||
</Search.Indicator>
|
||||
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
|
||||
</Search.Control>
|
||||
<Search.Portal>
|
||||
<Search.Content
|
||||
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
>
|
||||
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
|
||||
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
|
||||
😬 No emoji found
|
||||
</Search.NoResult>
|
||||
</Search.Content>
|
||||
</Search.Portal>
|
||||
</Search>
|
||||
</div>
|
||||
{/* <div class="mt-4 text-base leading-none">
|
||||
Emoji selected: {emoji()?.emoji} {emoji()?.name}
|
||||
</div> */}
|
||||
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
||||
<div class="h-[254px] overflow-scroll scrollbar-hide">
|
||||
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
|
||||
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
||||
footer
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
<div class="px-4 mt-4 bg-white rounded-t-2xl">
|
||||
<div class="h-[254px] overflow-scroll scrollbar-hide">
|
||||
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
|
||||
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
|
||||
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
|
||||
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
|
||||
footer
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -3,47 +3,47 @@ import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
export function FolderPicker() {
|
||||
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
||||
const [status, setStatus] = createSignal<string>("");
|
||||
const [selectedPath, setSelectedPath] = createSignal<string>("");
|
||||
const [status, setStatus] = createSignal<string>("");
|
||||
|
||||
const handleFolderSelect = async () => {
|
||||
try {
|
||||
const selected = await open({
|
||||
directory: true,
|
||||
multiple: false,
|
||||
});
|
||||
const handleFolderSelect = async () => {
|
||||
try {
|
||||
const selected = await open({
|
||||
directory: true,
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
setSelectedPath(selected as string);
|
||||
// Send the path to Rust
|
||||
const response = await invoke("handle_selected_folder", {
|
||||
path: selected,
|
||||
});
|
||||
setStatus(`Folder processed: ${response}`);
|
||||
}
|
||||
} catch (error) {
|
||||
setStatus(`Error: ${error}`);
|
||||
}
|
||||
};
|
||||
if (selected) {
|
||||
setSelectedPath(selected as string);
|
||||
// Send the path to Rust
|
||||
const response = await invoke("handle_selected_folder", {
|
||||
path: selected,
|
||||
});
|
||||
setStatus(`Folder processed: ${response}`);
|
||||
}
|
||||
} catch (error) {
|
||||
setStatus(`Error: ${error}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFolderSelect}
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Select Folder
|
||||
</button>
|
||||
return (
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleFolderSelect}
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Select Folder
|
||||
</button>
|
||||
|
||||
{selectedPath() && (
|
||||
<div class="text-left max-w-md">
|
||||
<p class="font-semibold">Selected folder:</p>
|
||||
<p class="text-sm break-all">{selectedPath()}</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedPath() && (
|
||||
<div class="text-left max-w-md">
|
||||
<p class="font-semibold">Selected folder:</p>
|
||||
<p class="text-sm break-all">{selectedPath()}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
||||
</div>
|
||||
);
|
||||
{status() && <p class="text-sm text-gray-600">{status()}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,35 +3,35 @@ import { listen } from "@tauri-apps/api/event";
|
||||
import { FolderPicker } from "./FolderPicker";
|
||||
|
||||
export function ImageViewer() {
|
||||
const [latestImage, setLatestImage] = createSignal<string | null>(null);
|
||||
const [latestImage, setLatestImage] = createSignal<string | null>(null);
|
||||
|
||||
createEffect(() => {
|
||||
// Listen for PNG processing events
|
||||
const unlisten = listen("png-processed", (event) => {
|
||||
console.log("Received processed PNG");
|
||||
const base64Data = event.payload as string;
|
||||
setLatestImage(`data:image/png;base64,${base64Data}`);
|
||||
});
|
||||
createEffect(() => {
|
||||
// Listen for PNG processing events
|
||||
const unlisten = listen("png-processed", (event) => {
|
||||
console.log("Received processed PNG");
|
||||
const base64Data = event.payload as string;
|
||||
setLatestImage(`data:image/png;base64,${base64Data}`);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((fn) => fn()); // Cleanup listener
|
||||
};
|
||||
});
|
||||
return () => {
|
||||
unlisten.then((fn) => fn()); // Cleanup listener
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FolderPicker />
|
||||
return (
|
||||
<div>
|
||||
<FolderPicker />
|
||||
|
||||
{latestImage() && (
|
||||
<div class="mt-4">
|
||||
<h3>Latest Processed Image:</h3>
|
||||
<img
|
||||
src={latestImage() || undefined}
|
||||
alt="Latest processed"
|
||||
class="max-w-md"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
{latestImage() && (
|
||||
<div class="mt-4">
|
||||
<h3>Latest Processed Image:</h3>
|
||||
<img
|
||||
src={latestImage() || undefined}
|
||||
alt="Latest processed"
|
||||
class="max-w-md"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,21 +3,21 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: "Manrope";
|
||||
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-family: "Manrope";
|
||||
src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
@apply bg-neutral-100 text-black rounded-xl;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
@apply bg-neutral-100 text-black rounded-xl;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user