diff --git a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss index 972853e2cd..d7a7b5af21 100644 --- a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss +++ b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss @@ -8,14 +8,47 @@ position: relative; background-color: #57577d; - img { + img, .cover-img-edit { + position: absolute; width: 100%; height: 100%; + } + + img { object-fit: cover; pointer-events: none; - position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } + + .cover-img-edit { + padding: .25rem; + font-size: .75rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all .25s ease-in-out; + color: transparent; + + span { text-align: center } + + svg { + position: absolute; + color: #fff; + transition: background .25s ease-in-out; + background: rgba(#000, .5); + border-radius: .25rem; + padding: .5rem; + right: .25rem; + bottom: .25rem; + } + + &:hover { + color: #fff; + background: rgba(#000, .5); + svg { background: none } + } + } } diff --git a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx index 3d770a463f..bd58a47f0a 100644 --- a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx +++ b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx @@ -1,9 +1,15 @@ import React from "react"; +import { Link } from "react-router-dom"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPen } from "@fortawesome/pro-solid-svg-icons"; import "./WeightCoverImage.scss"; + interface WeightCoverImageProps { src?: string; alt?: string; height?: number; + onClick?: (e: any) => any; + to?: string, width?: number; coverIndex?: number; } @@ -12,9 +18,12 @@ export default function WeightCoverImage({ src, alt, height = 100, + onClick, + to, width = 100, coverIndex, }: WeightCoverImageProps) { + console.log("👕",onClick); const containerStyle = { height: `${height}px`, width: `${width}px`, @@ -27,8 +36,15 @@ export default function WeightCoverImage({ } return ( -
+
{alt + { to ? + Edit cover image + + : null }
); } diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx index 34e74a8f9e..fe628a54c5 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -43,7 +43,13 @@ const EntityInputFull = ({ media, clear }: SlideProps) => { const mediaType = mediaCategoryfromString(media?.media_type || ""); switch (mediaType) { - case MediaFilters.image: return + case MediaFilters.image: return <> + +
+ Your file +
+ ; case MediaFilters.video: return <>