From 71833c629cfe226c4e87a3bb4b9675cc0b6a53c9 Mon Sep 17 00:00:00 2001
From: Varun Murlidhar <vmurlidhar@unc.edu>
Date: Fri, 5 Apr 2024 11:21:52 -0400
Subject: [PATCH] Add togglable favorite icon to drawer
---
compass/components/page/Drawer.tsx | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx
index 6387def..90c02a5 100644
--- a/compass/components/page/Drawer.tsx
+++ b/compass/components/page/Drawer.tsx
@@ -1,8 +1,8 @@
import { FunctionComponent, ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import { ChevronDoubleLeftIcon } from '@heroicons/react/24/solid';
-import { BookmarkIcon, XMarkIcon } from "@heroicons/react/24/solid";
-import { ArrowsPointingOutIcon, ArrowsPointingInIcon } from '@heroicons/react/24/outline';
+import { BookmarkIcon, XMarkIcon, StarIcon as SolidStarIcon } from "@heroicons/react/24/solid";
+import { ArrowsPointingOutIcon, ArrowsPointingInIcon, StarIcon as OutlineStarIcon } from '@heroicons/react/24/outline';
import Card from '@/components/page/Card'
@@ -31,6 +31,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
const [currentCardText, setCurrentCardText] = useState("");
const [currentCardIcon, setCurrentCardIcon] = useState<string>('');
const [error, setError] = useState<string | null>(null);
+ const [isFavorite, setIsFavorite] = useState(false);
const toggleDrawer = () => {
@@ -41,6 +42,8 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
}
const toggleDrawerFullScreen = () => setIsFull(!isFull);
+
+ const toggleFavorite = () => setIsFavorite(!isFavorite);
const handleCardClick = (text: string, icon: ReactElement) => {
console.log('click')
@@ -92,6 +95,8 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
const iconComponent = isFull ? <ArrowsPointingInIcon className="h-5 w-5" /> : <ArrowsPointingOutIcon className="h-5 w-5" />;
+ const favoriteIcon = isFavorite ? <SolidStarIcon className="h-5 w-5" /> : <OutlineStarIcon className="h-5 w-5" />
+
return (
<div>
@@ -105,6 +110,9 @@ const Drawer: FunctionComponent<DrawerProps> = ({ title, children, onSave, edita
<h2 className = "text-sm text-gray-800 font-semibold">{currentCardText}</h2>
</div>
<div>
+ <button onClick={toggleFavorite} className="py-2 text-gray-500 hover:text-gray-800">
+ {favoriteIcon}
+ </button>
<button onClick={toggleDrawerFullScreen} className="py-2 text-gray-500 hover:text-gray-800">
{iconComponent}
</button>