Skip to content

Commit eb0d4cb

Browse files
waleedlatif1waleedlatif1
authored
fix(templates): fixed verified creator status displaying & tooltip on templates (#2165)
1 parent ffd12e1 commit eb0d4cb

4 files changed

Lines changed: 36 additions & 28 deletions

File tree

‎apps/sim/app/templates/components/template-card.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
4242
</div>
4343

4444
<div className='mt-[14px] flex items-center justify-between'>
45-
<div className='flex items-center gap-[8px]'>
46-
<div className='h-[14px] w-[14px] animate-pulse rounded-full bg-gray-700' />
45+
<div className='flex items-center gap-[6px]'>
46+
<div className='h-[20px] w-[20px] animate-pulse rounded-full bg-gray-700' />
4747
<div className='h-3 w-20 animate-pulse rounded bg-gray-700' />
4848
</div>
4949
<div className='flex items-center gap-[6px]'>
@@ -269,17 +269,17 @@ function TemplateCardInner({
269269
</div>
270270

271271
<div className='mt-[10px] flex items-center justify-between'>
272-
<div className='flex items-center gap-[8px]'>
272+
<div className='flex min-w-0 flex-1 items-center gap-[6px]'>
273273
{authorImageUrl ? (
274-
<div className='h-[26px] w-[26px] flex-shrink-0 overflow-hidden rounded-full'>
274+
<div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
275275
<img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
276276
</div>
277277
) : (
278-
<div className='flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
279-
<User className='h-[18px] w-[18px] text-[#888888]' />
278+
<div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
279+
<User className='h-[12px] w-[12px] text-[#888888]' />
280280
</div>
281281
)}
282-
<div className='flex items-center gap-[4px]'>
282+
<div className='flex min-w-0 items-center gap-[4px]'>
283283
<span className='truncate font-medium text-[#888888] text-[12px]'>{author}</span>
284284
{isVerified && <VerifiedBadge size='sm' />}
285285
</div>

‎apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
4343
</div>
4444

4545
<div className='mt-[14px] flex items-center justify-between'>
46-
<div className='flex items-center gap-[8px]'>
47-
<div className='h-[14px] w-[14px] animate-pulse rounded-full bg-gray-700' />
46+
<div className='flex items-center gap-[6px]'>
47+
<div className='h-[20px] w-[20px] animate-pulse rounded-full bg-gray-700' />
4848
<div className='h-3 w-20 animate-pulse rounded bg-gray-700' />
4949
</div>
5050
<div className='flex items-center gap-[6px]'>
@@ -270,17 +270,17 @@ function TemplateCardInner({
270270
</div>
271271

272272
<div className='mt-[10px] flex items-center justify-between'>
273-
<div className='flex items-center gap-[8px]'>
273+
<div className='flex min-w-0 flex-1 items-center gap-[6px]'>
274274
{authorImageUrl ? (
275-
<div className='h-[26px] w-[26px] flex-shrink-0 overflow-hidden rounded-full'>
275+
<div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
276276
<img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
277277
</div>
278278
) : (
279-
<div className='flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
280-
<User className='h-[18px] w-[18px] text-[#888888]' />
279+
<div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
280+
<User className='h-[12px] w-[12px] text-[#888888]' />
281281
</div>
282282
)}
283-
<div className='flex items-center gap-[4px]'>
283+
<div className='flex min-w-0 items-center gap-[4px]'>
284284
<span className='truncate font-medium text-[#888888] text-[12px]'>{author}</span>
285285
{isVerified && <VerifiedBadge size='sm' />}
286286
</div>

‎apps/sim/app/workspace/[workspaceId]/templates/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export default async function TemplatesPage({ params }: TemplatesPageProps) {
6363
name: string
6464
profileImageUrl?: string | null
6565
details?: unknown
66+
verified: boolean
6667
} | null
6768
views: number
6869
stars: number
@@ -158,6 +159,7 @@ export default async function TemplatesPage({ params }: TemplatesPageProps) {
158159
} | null,
159160
referenceType: row.creator.referenceType,
160161
referenceId: row.creator.referenceId,
162+
verified: row.creator.verified,
161163
}
162164
: null,
163165
views: row.views,

‎apps/sim/components/ui/verified-badge.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Tooltip } from '@/components/emcn'
12
import { cn } from '@/lib/core/utils/cn'
23

34
interface VerifiedBadgeProps {
@@ -15,19 +16,24 @@ export function VerifiedBadge({ className, size = 'md' }: VerifiedBadgeProps) {
1516
const dimension = sizeMap[size]
1617

1718
return (
18-
<div className={cn('inline-flex flex-shrink-0', className)} title='Verified Creator'>
19-
<svg
20-
width={dimension}
21-
height={dimension}
22-
viewBox='0 0 16 16'
23-
fill='none'
24-
xmlns='http://www.w3.org/2000/svg'
25-
>
26-
<path
27-
d='M16 8.375C16 8.93437 15.8656 9.45312 15.5969 9.92813C15.3281 10.4031 14.9688 10.775 14.5156 11.0344C14.5281 11.1188 14.5344 11.25 14.5344 11.4281C14.5344 12.275 14.25 12.9937 13.6875 13.5875C13.1219 14.1844 12.4406 14.4812 11.6438 14.4812C11.2875 14.4812 10.9469 14.4156 10.625 14.2844C10.375 14.7969 10.0156 15.2094 9.54375 15.525C9.075 15.8438 8.55937 16 8 16C7.42812 16 6.90938 15.8469 6.44688 15.5344C5.98125 15.225 5.625 14.8094 5.375 14.2844C5.05312 14.4156 4.71562 14.4812 4.35625 14.4812C3.55937 14.4812 2.875 14.1844 2.30312 13.5875C1.73125 12.9937 1.44687 12.2719 1.44687 11.4281C1.44687 11.3344 1.45938 11.2031 1.48125 11.0344C1.02813 10.7719 0.66875 10.4031 0.4 9.92813C0.134375 9.45312 0 8.93437 0 8.375C0 7.78125 0.15 7.23438 0.446875 6.74062C0.74375 6.24687 1.14375 5.88125 1.64375 5.64375C1.5125 5.2875 1.44687 4.92812 1.44687 4.57188C1.44687 3.72813 1.73125 3.00625 2.30312 2.4125C2.875 1.81875 3.55937 1.51875 4.35625 1.51875C4.7125 1.51875 5.05312 1.58438 5.375 1.71563C5.625 1.20312 5.98438 0.790625 6.45625 0.475C6.925 0.159375 7.44063 0 8 0C8.55937 0 9.075 0.159375 9.54375 0.471875C10.0125 0.7875 10.375 1.2 10.625 1.7125C10.9469 1.58125 11.2844 1.51562 11.6438 1.51562C12.4406 1.51562 13.1219 1.8125 13.6875 2.40937C14.2531 3.00625 14.5344 3.725 14.5344 4.56875C14.5344 4.9625 14.475 5.31875 14.3562 5.64062C14.8562 5.87813 15.2563 6.24375 15.5531 6.7375C15.85 7.23438 16 7.78125 16 8.375ZM7.65938 10.7844L10.9625 5.8375C11.0469 5.70625 11.0719 5.5625 11.0437 5.40938C11.0125 5.25625 10.9344 5.13438 10.8031 5.05312C10.6719 4.96875 10.5281 4.94063 10.375 4.9625C10.2188 4.9875 10.0938 5.0625 10 5.19375L7.09062 9.56875L5.75 8.23125C5.63125 8.1125 5.49375 8.05625 5.34062 8.0625C5.18437 8.06875 5.05 8.125 4.93125 8.23125C4.825 8.3375 4.77187 8.47187 4.77187 8.63437C4.77187 8.79375 4.825 8.92813 4.93125 9.0375L6.77187 10.8781L6.8625 10.95C6.96875 11.0219 7.07812 11.0562 7.18437 11.0562C7.39375 11.0531 7.55313 10.9656 7.65938 10.7844Z'
28-
fill='#33B4FF'
29-
/>
30-
</svg>
31-
</div>
19+
<Tooltip.Root>
20+
<Tooltip.Trigger asChild>
21+
<div className={cn('inline-flex flex-shrink-0', className)}>
22+
<svg
23+
width={dimension}
24+
height={dimension}
25+
viewBox='0 0 16 16'
26+
fill='none'
27+
xmlns='http://www.w3.org/2000/svg'
28+
>
29+
<path
30+
d='M16 8.375C16 8.93437 15.8656 9.45312 15.5969 9.92813C15.3281 10.4031 14.9688 10.775 14.5156 11.0344C14.5281 11.1188 14.5344 11.25 14.5344 11.4281C14.5344 12.275 14.25 12.9937 13.6875 13.5875C13.1219 14.1844 12.4406 14.4812 11.6438 14.4812C11.2875 14.4812 10.9469 14.4156 10.625 14.2844C10.375 14.7969 10.0156 15.2094 9.54375 15.525C9.075 15.8438 8.55937 16 8 16C7.42812 16 6.90938 15.8469 6.44688 15.5344C5.98125 15.225 5.625 14.8094 5.375 14.2844C5.05312 14.4156 4.71562 14.4812 4.35625 14.4812C3.55937 14.4812 2.875 14.1844 2.30312 13.5875C1.73125 12.9937 1.44687 12.2719 1.44687 11.4281C1.44687 11.3344 1.45938 11.2031 1.48125 11.0344C1.02813 10.7719 0.66875 10.4031 0.4 9.92813C0.134375 9.45312 0 8.93437 0 8.375C0 7.78125 0.15 7.23438 0.446875 6.74062C0.74375 6.24687 1.14375 5.88125 1.64375 5.64375C1.5125 5.2875 1.44687 4.92812 1.44687 4.57188C1.44687 3.72813 1.73125 3.00625 2.30312 2.4125C2.875 1.81875 3.55937 1.51875 4.35625 1.51875C4.7125 1.51875 5.05312 1.58438 5.375 1.71563C5.625 1.20312 5.98438 0.790625 6.45625 0.475C6.925 0.159375 7.44063 0 8 0C8.55937 0 9.075 0.159375 9.54375 0.471875C10.0125 0.7875 10.375 1.2 10.625 1.7125C10.9469 1.58125 11.2844 1.51562 11.6438 1.51562C12.4406 1.51562 13.1219 1.8125 13.6875 2.40937C14.2531 3.00625 14.5344 3.725 14.5344 4.56875C14.5344 4.9625 14.475 5.31875 14.3562 5.64062C14.8562 5.87813 15.2563 6.24375 15.5531 6.7375C15.85 7.23438 16 7.78125 16 8.375ZM7.65938 10.7844L10.9625 5.8375C11.0469 5.70625 11.0719 5.5625 11.0437 5.40938C11.0125 5.25625 10.9344 5.13438 10.8031 5.05312C10.6719 4.96875 10.5281 4.94063 10.375 4.9625C10.2188 4.9875 10.0938 5.0625 10 5.19375L7.09062 9.56875L5.75 8.23125C5.63125 8.1125 5.49375 8.05625 5.34062 8.0625C5.18437 8.06875 5.05 8.125 4.93125 8.23125C4.825 8.3375 4.77187 8.47187 4.77187 8.63437C4.77187 8.79375 4.825 8.92813 4.93125 9.0375L6.77187 10.8781L6.8625 10.95C6.96875 11.0219 7.07812 11.0562 7.18437 11.0562C7.39375 11.0531 7.55313 10.9656 7.65938 10.7844Z'
31+
fill='#33B4FF'
32+
/>
33+
</svg>
34+
</div>
35+
</Tooltip.Trigger>
36+
<Tooltip.Content>Verified Creator</Tooltip.Content>
37+
</Tooltip.Root>
3238
)
3339
}

0 commit comments

Comments
 (0)