rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-06 20:50:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add togglable favorite icon to drawer

Browse Source
This commit is contained in:
Varun Murlidhar 2024-04-05 11:21:52 -04:00
parent 798a2fefa8
commit 71833c629c
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
compass/components/page/Drawer.tsx
View File

@ -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>