mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 10:19:51 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

feat: added image link (#2228)

Browse Source 
Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
This commit is contained in:
Piyush Gupta
2024-03-14 15:08:29 +05:30
committed by GitHub
parent f98a57582a
commit 1a28660dfd
2 changed files with 49 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/surveys/src/components/general/QuestionImage.tsx
View File

@@ -5,9 +5,31 @@ interface QuestionImageProps {
export default function QuestionImage({ imgUrl, altText = "Image" }: QuestionImageProps) {
return (
<div className="mb-4 rounded-md">
<div className="group/image relative mb-4 block rounded-md">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={imgUrl} alt={altText} className="mb-4 rounded-md" />
<img src={imgUrl} alt={altText} className="rounded-md" />
<a
href={imgUrl}
target="_blank"
rel="noreferrer"
className="absolute bottom-2 right-2 flex items-center gap-2 rounded-md bg-gray-800 bg-opacity-40 p-1.5 text-white opacity-0 backdrop-blur-lg transition duration-300 ease-in-out hover:bg-opacity-65 group-hover/image:opacity-100">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-expand">
<path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
<path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
<path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
<path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
</svg>
</a>
</div>
);
}

26
packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
View File

@@ -118,7 +118,7 @@ export default function PictureSelectionQuestion({
Array.isArray(value) && value.includes(choice.id)
? `border-brand text-brand z-10 border-4 shadow-xl focus:border-4`
: "",
"border-border focus:border-border-highlight focus:bg-accent-selected-bg relative box-border inline-block h-28 w-full overflow-hidden rounded-xl border focus:outline-none"
"border-border focus:border-border-highlight focus:bg-accent-selected-bg group/image relative box-border inline-block h-28 w-full cursor-pointer overflow-hidden rounded-xl border focus:outline-none"
)}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
@@ -127,6 +127,30 @@ export default function PictureSelectionQuestion({
alt={choice.imageUrl.split("/").pop()}
className="h-full w-full object-cover"
/>
<a
href={choice.imageUrl}
target="_blank"
title="Open in new tab"
rel="noreferrer"
onClick={(e) => e.stopPropagation()}
className="absolute bottom-2 right-2 flex items-center gap-2 whitespace-nowrap rounded-md bg-gray-800 bg-opacity-40 p-1.5 text-white opacity-0 backdrop-blur-lg transition duration-300 ease-in-out hover:bg-opacity-65 group-hover/image:opacity-100">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-expand">
<path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
<path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
<path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
<path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
</svg>
</a>
{question.allowMulti ? (
<input
id={`${choice.id}-checked`}