Skip to content

Commit

Permalink
add preact, effect on text field.
Browse files Browse the repository at this point in the history
  • Loading branch information
cf2013 committed Jul 31, 2024
1 parent ed49382 commit 71ada4d
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 20 deletions.
16 changes: 9 additions & 7 deletions astro.config.mjs
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { defineConfig } from 'astro/config'
import mdx from '@astrojs/mdx'
import tailwind from '@astrojs/tailwind'
import compress from 'astro-compress'
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import tailwind from '@astrojs/tailwind';
import compress from 'astro-compress';

import preact from "@astrojs/preact";

// https://astro.build/config
export default defineConfig({
compressHTML: true,
integrations: [mdx(), tailwind({
applyBaseStyles: false,
}), compress()],
})
applyBaseStyles: false
}), compress(), preact()]
});
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,9 @@
"sass": "^1.49.9",
"svgo": "^2.8.0",
"tailwindcss": "^3.2.7"
},
"dependencies": {
"@astrojs/preact": "^3.5.1",
"preact": "^10.23.1"
}
}
34 changes: 21 additions & 13 deletions src/components/Searchbar.astro
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
---
import TextInput from "../scripts/textInput";
---

<div class="container">
<div class="mb-16 text-6xl text-center">
<div class="text-input mb-16 text-3xl text-center">
<input type="text" value="Buscar sitios que aceptan Bitcoin..." class="text-input" />
</div>
<div class="text-input mb-16 text-3xl text-center">
<TextInput client:load />
</div>
</div>

<style lang="scss">
.text-input {
padding: 0.5rem;
color: var(--neutral-700);
background-color: var(--1000);
font-family: 'Open Sans', sans-serif;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
</style>

.text-input {
padding: 0.5rem;
color: var(--neutral-700);
background-color: var(--1000);
font-family: 'Open Sans', sans-serif;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.input {
padding: 0.5rem;
color: var(--neutral-700);
background-color: var(--1000);
font-family: 'Open Sans', sans-serif;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
</style>
39 changes: 39 additions & 0 deletions src/scripts/textInput.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// TextInput.jsx
import { h } from 'preact';
import { useEffect, useRef } from 'preact/hooks';

const TextInput = () => {
const inputRef = useRef(null);

useEffect(() => {
const handleFocus = (event) => {
event.target.select();
event.target.classList.add('blinking');
};

const handleBlur = (event) => {
event.target.classList.remove('blinking');
};

const input = inputRef.current;
input.addEventListener('focus', handleFocus);
input.addEventListener('blur', handleBlur);

return () => {
input.removeEventListener('focus', handleFocus);
input.removeEventListener('blur', handleBlur);
};
}, []);

return (
<div class="text-input">
<input
type="text"
value="Buscar sitios que aceptan Bitcoin..."
ref={inputRef}
/>
</div>
);
};

export default TextInput;
7 changes: 7 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/base",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
}

0 comments on commit 71ada4d

Please sign in to comment.