refactor: update tailwind classes to v3 syntax (#345)

Updated background/border opacity to the new syntax:
- border-skin-fill border-opacity-40 => border-skin-fill/40
- selection:bg-skin-accent selection:bg-opacity-70 => selection:bg-skin-accent/70
This commit is contained in:
Sat Naing
2024-08-04 10:49:13 +07:00
committed by GitHub
parent 910b72e513
commit be172efa17
2 changed files with 7 additions and 32 deletions
+3 -6
View File
@@ -1,5 +1,5 @@
import Fuse from "fuse.js";
import { useEffect, useRef, useState, useMemo } from "react";
import { useEffect, useRef, useState, useMemo, type FormEvent } from "react";
import Card from "@components/Card";
import type { CollectionEntry } from "astro:content";
@@ -26,7 +26,7 @@ export default function SearchBar({ searchList }: Props) {
null
);
const handleChange = (e: React.FormEvent<HTMLInputElement>) => {
const handleChange = (e: FormEvent<HTMLInputElement>) => {
setInputVal(e.currentTarget.value);
};
@@ -83,10 +83,7 @@ export default function SearchBar({ searchList }: Props) {
<span className="sr-only">Search</span>
</span>
<input
className="block w-full rounded border border-skin-fill
border-opacity-40 bg-skin-fill py-3 pl-10
pr-3 placeholder:italic placeholder:text-opacity-75
focus:border-skin-accent focus:outline-none"
className="block w-full rounded border border-skin-fill/40 bg-skin-fill py-3 pl-10 pr-3 placeholder:italic focus:border-skin-accent focus:outline-none"
placeholder="Search for anything..."
type="text"
name="search"