Added bookmark and past used in /calculators

This commit is contained in:
2026-04-02 13:17:36 +05:30
parent f6b0f12762
commit f8d0f5fd79
7 changed files with 173 additions and 15 deletions

View File

@@ -1,6 +1,15 @@
"use client"
import { useEffect, useState } from "react";
import { Calculator } from "./calculators/types";
export default function Section({sectionName, Calculators, id} : {sectionName:string, Calculators:Calculator[], id:string}){
const [bookmarks, setBookmarks] = useState<string[]>([]);
useEffect(() => {
const bookmarkedStr:string = localStorage.getItem("bookmarks") || "[]";
const bookmarkedObj : string[] = JSON.parse(bookmarkedStr);
setBookmarks(bookmarkedObj);
}, [])
return(
<li>
<details>
@@ -8,10 +17,87 @@ export default function Section({sectionName, Calculators, id} : {sectionName:st
<ul>
{Calculators.map((e) => {
return(
<li key={e.id}>
<a href={`/calculate/${id}/${e.id}`}>
{e.name}
</a>
<li className="flex items-center w-full" key={e.id}>
<div className="flex items-start w-full">
<a
href={`/calculate/${id}/${e.id}`}
className="flex-1"
>
{e.name}
</a>
<button
className="shrink-0"
onClick={() => {
const bookmarks:string = localStorage.getItem("bookmarks") || "[]";
var bookmarksArr:string[] = JSON.parse(bookmarks);
if(bookmarksArr.indexOf(id) !== -1){
bookmarksArr = bookmarksArr.filter(e => e !== id);
}else{
bookmarksArr.push(id)
}
setBookmarks(bookmarksArr);
localStorage.setItem("bookmarks", JSON.stringify(bookmarksArr));
}}
>
{ bookmarks.find(e => e === id) ? <svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
className="w-6 h-6"
viewBox="0 0 256 256"
>
<g
fill="#ed1b24"
fillRule="nonzero"
stroke="none"
strokeWidth="1"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeMiterlimit="10"
strokeDasharray=""
strokeDashoffset="0"
fontFamily="none"
fontWeight="none"
fontSize="none"
textAnchor="inherit"
style={{ mixBlendMode: "normal" }}
>
<g transform="scale(5.12,5.12)">
<path d="M37,48c-0.17578,0 -0.34766,-0.04687 -0.50391,-0.13672l-11.49609,-6.70703l-11.49609,6.70703c-0.30859,0.17969 -0.69141,0.18359 -1,0.00391c-0.3125,-0.17969 -0.50391,-0.50781 -0.50391,-0.86719v-44c0,-0.55078 0.44922,-1 1,-1h24c0.55469,0 1,0.44922 1,1v44c0,0.35938 -0.19141,0.6875 -0.50391,0.86719c-0.15234,0.08984 -0.32422,0.13281 -0.49609,0.13281z" />
</g>
</g>
</svg> : <svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
viewBox="0 0 256 256"
className="w-6 h-6"
>
<g
fill="#ed1b24"
fillRule="nonzero"
stroke="none"
strokeWidth="1"
strokeLinecap="butt"
strokeLinejoin="miter"
strokeMiterlimit="10"
strokeDasharray=""
strokeDashoffset="0"
fontFamily="none"
fontWeight="none"
fontSize="none"
textAnchor="inherit"
style={{ mixBlendMode: "normal" }}
>
<g transform="scale(5.12,5.12)">
<path d="M12.8125,2c-0.47656,0.08984 -0.82031,0.51172 -0.8125,1v44c-0.00391,0.35938 0.1875,0.69141 0.49609,0.87109c0.30859,0.18359 0.69141,0.18359 1.00391,0.00391l11.5,-6.71875l11.5,6.71875c0.3125,0.17969 0.69531,0.17969 1.00391,-0.00391c0.30859,-0.17969 0.5,-0.51172 0.49609,-0.87109v-44c0,-0.55078 -0.44922,-1 -1,-1h-24c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM14,4h22v41.25l-10.5,-6.125c-0.30859,-0.17969 -0.69141,-0.17969 -1,0l-10.5,6.125z" />
</g>
</g>
</svg>}
</button>
</div>
</li>
)
})}