feat: Added close button for settings
This commit is contained in:
parent
80978e9041
commit
ea8e34e444
10
src/components/CloseButton/CloseButton.css
Normal file
10
src/components/CloseButton/CloseButton.css
Normal file
@ -0,0 +1,10 @@
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 1em;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
z-index: 1000;
|
||||
}
|
13
src/components/CloseButton/CloseButton.tsx
Normal file
13
src/components/CloseButton/CloseButton.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import './CloseButton.css';
|
||||
|
||||
type CloseButtonProps = {
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
const CloseButton = ({ onClick }: CloseButtonProps) => (
|
||||
<div className="closeButton" onClick={onClick}>
|
||||
✕
|
||||
</div>
|
||||
);
|
||||
|
||||
export default CloseButton;
|
@ -5,6 +5,7 @@ import DetailsAuthor from './Author';
|
||||
import { useMemo } from 'react';
|
||||
import uniq from 'lodash/uniq';
|
||||
import useNav from '../../utils/useNav';
|
||||
import CloseButton from '../CloseButton/CloseButton';
|
||||
|
||||
type DetailsViewProps = {
|
||||
images: NostrImage[];
|
||||
@ -23,14 +24,7 @@ const DetailsView = ({ images, activeImageIdx, setActiveImageIdx }: DetailsViewP
|
||||
|
||||
return (
|
||||
<div className="details">
|
||||
<div
|
||||
className="closeButton"
|
||||
onClick={() => {
|
||||
setActiveImageIdx(undefined);
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</div>
|
||||
<CloseButton onClick={() => setActiveImageIdx(undefined)}></CloseButton>
|
||||
<div className="details-contents">
|
||||
<img className="detail-image" src={currentImage?.url}></img>
|
||||
<div className="detail-description">
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { FormEvent, useState } from 'react';
|
||||
import './Settings.css';
|
||||
import useNav, { Settings } from '../utils/useNav';
|
||||
import CloseButton from './CloseButton/CloseButton';
|
||||
|
||||
type SettingsProps = {
|
||||
onClose: () => void;
|
||||
@ -31,6 +32,7 @@ const SettingsDialog = ({ onClose, settings }: SettingsProps) => {
|
||||
return (
|
||||
<div className="settings" onClick={e => e.stopPropagation()}>
|
||||
<h2>Settings</h2>
|
||||
<CloseButton onClick={onClose}></CloseButton>
|
||||
|
||||
<div className="settings-content">
|
||||
<label htmlFor="tags">Tags (Comma separated):</label>
|
||||
|
Loading…
Reference in New Issue
Block a user