MaDsEn
Explore posts from serversError upgrading headlessui
When you use the * inside the imported package it will retrieve packages that is also used in this case floating ui react, so try Importing that also with wrapping it with the alias, but without the *, but I know a lot of people have trouble with headless ui after the new version came out https://discord.com/channels/684898665143206084/991511118524715139/1240955650352349205, so some go back to a previous version for now
3 replies
Problem rerender a island when updating the value of a signal!
You could check out https://github.com/lucacasonato/fresh-with-signals to see how signals could be setup and just build on it.
8 replies
Problem rerender a island when updating the value of a signal!
Should be possible. Try something like this - //this is the islands/SearchFilter.tsx
import { useSignal } from "@preact/signals";
import { categorySignal, handleSearch } from '../signals/search.ts';
interface SearchFilterProps {
initialCategory: string;
}
export default function SearchFilter(props: SearchFilterProps) {
const [currentCategory, setCurrentCategory] = useSignal(props.initialCategory);
const updateCategory = (newCategory:string) => {
console.log(
Updating category to: ${newCategory});
setCurrentCategory(newCategory);
// Optionally, update the browser's URL to reflect the new category without reloading the page
const url = new URL(window.location.toString());
url.searchParams.set('category', newCategory);
// Push the new URL with the updated category
window.history.pushState({}, '', url.toString());
search()
};
// Helper function to determine button classes based on current category
const buttonClass = (category: string) =>
text-xl py-1 text-white ${currentCategory() === category ? "font-bold" : "font-medium"};
return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {currentCategory()}</div>
<div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
<div class="flex flex-row items-center justify-start">
<ul class="flex gap-12">
<li>
<button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
Organizations
</button>
</li>
...8 replies
Problem rerender a island when updating the value of a signal!
Have you tried implementing useState - //this is the islands/SearchFilter.tsx
import { useState } from 'preact/hooks';
import { categorySignal, handleSearch } from '../signals/search.ts';
interface SearchFilterProps {
initialCategory: string;
}
export default function SearchFilter(props: SearchFilterProps) {
const [currentCategory, setCurrentCategory] = useState(props.initialCategory);
const updateCategory = (newCategory:string) => {
console.log(
Updating category to: ${newCategory});
setCurrentCategory(newCategory);
// Optionally, update the browser's URL to reflect the new category without reloading the page
const url = new URL(window.location.toString());
url.searchParams.set('category', newCategory);
// Push the new URL with the updated category
window.history.pushState({}, '', url.toString());
search()
};
// Helper function to determine button classes based on current category
const buttonClass = (category: string) =>
text-xl py-1 text-white ${currentCategory === category ? "font-bold" : "font-medium"};
return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {currentCategory}</div>
<div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
<div class="flex flex-row items-center justify-start">
<ul class="flex gap-12">
<li>
<button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
Organizations
</button>
</li>
...8 replies
KKinde
•Created by andiputraw on 2/9/2024 in #💻┃support
Server Side authentication
Sended you a friend invite. I can send you the repo to clone 😉
8 replies
KKinde
•Created by andiputraw on 2/9/2024 in #💻┃support
Server Side authentication
Sorry, it is still in private by the Kinde team. Got early access to it to test it out.
8 replies
KKinde
•Created by andiputraw on 2/9/2024 in #💻┃support
Server Side authentication
Have you checked https://github.com/kinde-starter-kits/deno-starter-kit. Pretty easy to change it to your specific needs. I am also using fresh.deno and got i working perfectly. Currently working on a better middleware option, but the package is a great starting point.
8 replies
KKinde
•Created by MaDsEn on 1/18/2024 in #💻┃support
Typescript SDK middleware route handling.
Thank you for the respons. Will check it out👍. It was just easier if someone had made an example,😊 but have a few ideas that might work for a more structured project.
3 replies
How to send data from a child component to its sibling?
In your Form2 component, the line <p>The value is {form1Data} + {form2Data}</p> is not joining the two values properly. Try using curly braces and the + sign outside the string to link the values. See if this works <p>The value is {form1Data + ' ' + form2Data}</p>
7 replies