brob

import { useFusionAuth } from "@fusionauth/react-sdk";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function AccountPage() {
  
  const navigate = useNavigate();

  const { isLoggedIn, isFetchingUserInfo } = useFusionAuth();

brob

import { useNavigate } from "react-router-dom";
import { useFusionAuth } from "@fusionauth/react-sdk";
import { useEffect } from "react";

export default function HomePage() {
  const navigate = useNavigate();

  const { isLoggedIn, isFetchingUserInfo, startLogin, startRegister } =
    useFusionAuth();

brob

import { Navigate, Route, Routes } from "react-router-dom";

import HomePage from "./pages/HomePage";
import AccountPage from "./pages/AccountPage";

import { useFusionAuth } from "@fusionauth/react-sdk";

function App() {
  const { isFetchingUserInfo } = useFusionAuth();

brob

---
layout: "base.html"
title: Search Page
permalink:
  search: /search/
---

<h2>{{ eleventy.serverless.query.query }}</h2>
{% assign results = eleventy.serverless.query.query | getResults %}
{% for result in results %}

brob

templates: {
  item({ item }) {
    return <Action hit={item} />;
  }
}

brob

function Action({ hit }) {
  // Component to display the items
  return (
    <div className="aa-ItemWrapper">
      <div className="aa-ItemContent">
        <div className="aa-ItemIcon">{hit.icon}</div>
        <div className="aa-ItemContentBody">
          <div className="aa-ItemContentTitle">
            <span>{hit.highlighted}</span>
            {hit.enabled && (

brob

onSelect({ setContext }) {
  document.querySelector("body").classList.remove("dark");
  setContext({ dark: false });
}

brob

{ //...
  label: "/dark",
  enabled: state.context.dark,
  // ...
},
{ //...
  label: "/light",
  enabled: !state.context.dark,
  // ...
  }

brob

return [
  {
    icon: (
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
        />

brob

function Action({ hit }) {
  // Component to display the items  
  return (
    <div className="aa-ItemWrapper">
      <div className="aa-ItemContent">
        <div className="aa-ItemIcon">{hit.icon}</div>
        <div className="aa-ItemContentBody">
          <div className="aa-ItemContentTitle">
            <span>{hit.highlighted}</span>
          </div>