Skip to content

Commit

Permalink
add lil get button to mini tool card
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Apr 28, 2024
1 parent 66e0850 commit 3f47699
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 54 deletions.
2 changes: 1 addition & 1 deletion components/Navbar/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const Navbar = ({
alt="Prototypr Logo"
/>
<img
className={`xl:block ${isVisible ? "w-[25px] object-left-top object-cover" : "object-cover object-left-top w-[109px]"} transition transition-all duration-1000 hidden h-7 w-auto `}
className={`xl:block ${isVisible ? "w-[25px] object-left-top object-cover drop-shadow-md" : "object-cover object-left-top w-[109px]"} transition transition-all duration-1000 hidden h-7 w-auto `}
src={`/static/images/prototypr_logo.svg`}
alt="Prototypr Logo"
/>
Expand Down
117 changes: 66 additions & 51 deletions components/v4/card/ToolIconCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,27 @@ const {
const ToolIconCard = ({ tool, withBackground, small }) => {
let { slug, title, tags } = tool;

if(!tags?.data?.length){
tags.data = tags
if (!tags?.data?.length) {
tags.data = tags;
}
const plausible = usePlausible();

let coverImage =
// tool.legacyMedia?.logoNew?tool.legacyMedia?.logoNew:
// tool.legacyMedia?.mediaItemUrl?tool.legacyMedia?.mediaItemUrl:
// tool.legacyMedia?.imgUrl?tool.legacyMedia?.imgUrl:
tool.featuredImage?.data?.attributes?.url
? tool.featuredImage.data.attributes.url
: tool.legacyFeaturedImage
? tool.legacyFeaturedImage
: "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";

coverImage =
tool?.legacyMedia?.logoNew ||
coverImage?.logoNew ||
tool.legacyMedia?.mediaItemUrl ||
tool.legacyFeaturedImage?.mediaItemUrl;

let coverImage =
// tool.legacyMedia?.logoNew?tool.legacyMedia?.logoNew:
// tool.legacyMedia?.mediaItemUrl?tool.legacyMedia?.mediaItemUrl:
// tool.legacyMedia?.imgUrl?tool.legacyMedia?.imgUrl:
tool.featuredImage?.data?.attributes?.url
? tool.featuredImage.data.attributes.url
: tool.legacyFeaturedImage
? tool.legacyFeaturedImage
: "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png";

coverImage = (tool?.legacyMedia?.logoNew || coverImage?.logoNew || tool.legacyMedia?.mediaItemUrl ||tool.legacyFeaturedImage?.mediaItemUrl)

return (
<div>
<Link
Expand All @@ -40,48 +43,60 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
});
}}
className="flex"
><div className={`${withBackground?'hover:shadow-md hover:scale-[1.005] transition transition-all duration-400 bg-white p-2 shadow-sm border border-gray-200/70 border-1 rounded-2xl':''} w-full h-auto cursor-pointer flex flex-col group`}>
<div className="flex flex-row rounded-xl">
<div
style={{ flex: `0 0 ${small?'3em':'56px'}` }}
className={`${small?'h-12 w-12':'w-[56px] h-[56px]'} border border-gray-300/30 mr-2 relative rounded-xl overflow-hidden group-hover:scale-[1.03] group-hover:shadow-sm flex-none transition transition-all duration-700`}
>
{coverImage ? (
<Image
tabIndex={0}
loader={gumletLoader}
layout="fill"
objectFit="cover"
src={coverImage}
className="object-cover drop-shadow-sm"
alt="Author profile picture"
/>
) : (
""
)}
</div>
<div className="flex flex-col pl-1 justify-center">
<div className=" overflow-hidden tracking-tight line-clamp-1 inline font-semibold py-0 mb-0 font-inter text-base">
{title}
{/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
>
<div
className={`${withBackground ? "hover:shadow-md hover:scale-[1.005] transition transition-all duration-400 bg-white p-2 shadow-sm border border-gray-200/70 border-1 rounded-2xl" : ""} w-full h-auto cursor-pointer flex flex-col group`}
>
<div className="flex flex-row rounded-xl justify-between gap-3">
<div className="flex">
<div
style={{ flex: `0 0 ${small ? "3em" : "56px"}` }}
className={`${small ? "h-12 w-12" : "w-[56px] h-[56px]"} border border-gray-300/30 mr-2 relative rounded-xl overflow-hidden group-hover:scale-[1.03] group-hover:shadow-sm flex-none transition transition-all duration-700`}
>
{coverImage ? (
<Image
tabIndex={0}
loader={gumletLoader}
layout="fill"
objectFit="cover"
src={coverImage}
className="object-cover drop-shadow-sm"
alt="Author profile picture"
/>
) : (
""
)}
</div>
<div className="flex flex-col pl-1 justify-center">
<div className=" overflow-hidden tracking-tight line-clamp-1 inline font-semibold py-0 mb-0 font-inter text-base">
{title}
{/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
Promoted
</span> */}
</div>
{tags?.data?.length ? (
// <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
</div>
{tags?.data?.length ? (
// <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
<div className="flex flex-row text-sm text-gray-500">
<Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}/page/1`}>
{/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
<span className="text-xs capitalize text-gray-500">
{tags?.data[0]?.attributes?.name}
</span>
{/* </span> */}
<Link
href={`/toolbox/${tags?.data[0]?.attributes?.slug}/page/1`}
>
{/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
<span className="text-xs capitalize text-gray-500">
{tags?.data[0]?.attributes?.name}
</span>
{/* </span> */}
</Link>
</div>
// </Link>
) : (
""
)}
) : (
// </Link>
""
)}
</div>
</div>
<div className="flex flex-col 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/layout/ToolIconCardRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const ToolIconCardRow = ({ tools, title, textColor, withBackground, showHeader }
</Link> */}

</div>}
<div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2`}>
<div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2`}>
{tools.map((tool, index) => {
return (
<div key={index}>
Expand Down
2 changes: 1 addition & 1 deletion pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ export async function getStaticProps({ preview = null, locale }) {
preview,
[TAB_ITEMS[index].toolSlug],
"tool",
10,
8,
0,
sort
)) || [];
Expand Down

0 comments on commit 3f47699

Please sign in to comment.