Skip to content

Commit

Permalink
lil button on bg cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Apr 28, 2024
1 parent 8c5a8fd commit abb80cf
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 44 deletions.
95 changes: 52 additions & 43 deletions components/v4/card/ToolBackgroundCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const ToolBackgroundCard = ({
tagNumber,
height,
}) => {
let {title, slug, coverImage, tags, logo} = post;
let { title, slug, coverImage, tags, logo } = post;
return (
<div className="h-full">
<Link href={`/toolbox/${slug}`}>
Expand All @@ -22,51 +22,60 @@ const ToolBackgroundCard = ({
}
>
<div className="rounded-xl px-0 block cursor-pointer">
<Image
loader={gumletLoader}
priority={false < 2 ? `true` : `false`}
data-priority={false < 2 ? `true` : `false`}
fetchpriority={false < 2 ? "true" : "false"}
data-gmlazy={false < 2 ? `false` : `true`}
// fill={true}
// layout="fill"
// style={{width:'100%'}}
// width="100%"
// height="100%"
alt="Brand logo for external website's link"
className="object-cover rounded-xl bg-white group-hover:shadow-sm transition-transform duration-300"
src={coverImage}
fill
// sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
<div
className={`${height ? height : imageLarge ? "h-[240px]" : "h-[290px]"} rounded-xl relative flex flex-col justify-end`}
className={`${height ? height : imageLarge ? "h-[240px]" : "h-[290px]"} rounded-xl m-2 relative flex flex-col justify-end`}
>
<div className="absolute top-0 left-0 z-10 rounded-xl w-full h-full bg-gradient-to-b from-black/5 to-black/60"></div>
<Image
loader={gumletLoader}
priority={false < 2 ? `true` : `false`}
data-priority={false < 2 ? `true` : `false`}
fetchpriority={false < 2 ? "true" : "false"}
data-gmlazy={false < 2 ? `false` : `true`}
// fill={true}
// layout="fill"
// style={{width:'100%'}}
// width="100%"
// height="100%"
alt="Brand logo for external website's link"
className="object-cover rounded-xl bg-white group-hover:shadow-sm transition-transform duration-300"
src={coverImage}
fill
// sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
<div className={`rounded-xl z-20 p-3 flex m-2 bg-gray-900 bg-opacity-[0.15] backdrop-blur-sm`}>
<Image
loader={gumletLoader}
width={48}
height={48}
alt="Brand logo for external website's link"
className="object-cover flex-none flex-shrink-0 shine rounded-xl shadow"
// src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
// data-src={coverImage}
src={logo}
/>
<div className="overflow-hidden my-auto ml-3 text-white">
<div className={"line-clamp-1 font-medium"}>
{" "}
{title}
</div>
{/* {this.props.prototool !== true && */}
{tags?.length && (
<div className="text-xs mt-0.5 capitalize">
{tags[0].attributes.name}
</div>
)}
<div className="flex w-full justify-between p-2 bg-black/40 backdrop-blur-sm rounded-2xl border border-gray-300/20">
<div className="flex">
<div className="absolute top-0 left-0 z-10 rounded-xl w-full h-full bg-gradient-to-b from-black/5 to-black/60 shadow"></div>
<div
className={`rounded-xl z-20 flex`}
>
<Image
loader={gumletLoader}
width={48}
height={48}
alt="Brand logo for external website's link"
className="object-cover flex-none flex-shrink-0 shine rounded-xl shadow border border-gray-300/30"
// src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
// data-src={coverImage}
src={logo}
/>
<div className="overflow-hidden my-auto ml-3 text-white">
<div className={"line-clamp-1 font-medium"}> {title}</div>
{/* {this.props.prototool !== true && */}
{tags?.length && (
<div className="text-xs mt-0.5 capitalize">
{tags[0].attributes.name}
</div>
)}

{/* <div className='w-1/4 relative'> {this._getTag()}</div> */}
{/* <div className='w-1/4 relative'> {this._getTag()}</div> */}
</div>

</div>
</div>
<div className="flex flex-col z-20 justify-center">
<span className="text-xs font-semibold uppercase bg-gray-100 font-medium py-0.5 px-3 text-blue-600 border border-black border-opacity-5 rounded-full">
Get
</span>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/v4/card/ToolIconCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
</div>
</div>
</div>
<div className="flex flex-col justify-center">
<div className="flex flex-col z-10 justify-center">
<span className="text-xs font-semibold uppercase bg-gray-100 font-medium py-0.5 px-3 text-blue-600 border border-black border-opacity-5 rounded-full">
Get
</span>
Expand Down

0 comments on commit abb80cf

Please sign in to comment.