External/kycnotme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 202506241430

Browse Source
This commit is contained in:
pluja
2025-06-24 14:30:07 +00:00
parent 6ed07c8386
commit e4a5fa8fa7
20 changed files with 860 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/components/ScoreGauge.astro
View File

@@ -6,17 +6,29 @@ import { interpolate } from '../lib/numbers'
import { KYCNOTME_SCHEMA_MINI } from '../lib/schema'
import { transformCase } from '../lib/strings'
import type { HTMLAttributes } from 'astro/types'
import type { HTMLTag, Polymorphic } from 'astro/types'
import type { Review, WithContext } from 'schema-dts'
export type Props = HTMLAttributes<'div'> & {
type Props = Polymorphic<{
as: HTMLTag
score: number
label: string
total?: number
itemReviewedId?: string
}
showInfo?: boolean
children?: never
}>
const { score, label, total = 100, class: className, itemReviewedId, ...htmlProps } = Astro.props
const {
as: Tag = 'div',
score,
label,
total = 100,
class: className,
itemReviewedId,
showInfo = false,
...htmlProps
} = Astro.props
const progress = total === 0 ? 0 : Math.min(Math.max(score / total, 0), 1)
@@ -65,13 +77,13 @@ const { text, step, angle, formattedScore } = makeScoreInfo(score, total)
)
}
<div
<Tag
{...htmlProps}
class={cn(
'2xs:size-24 relative flex aspect-square size-18 flex-col items-center justify-start text-white',
className
)}
role="group"
role={htmlProps.role ?? 'group'}
>
<div
class={cn('2xs:text-[2rem] mt-[25%] mb-1 text-[1.5rem] leading-none font-bold tracking-tight', {
@@ -166,10 +178,14 @@ const { text, step, angle, formattedScore } = makeScoreInfo(score, total)
transform={angle !== undefined ? `rotate(${angle}, 48, 48)` : undefined}
class="stroke-night-700"></path>
<!-- Info icon -->
<!-- <path
d="M88 13C85.2386 13 83 10.7614 83 8C83 5.23857 85.2386 3 88 3C90.7614 3 93 5.23857 93 8C93 10.7614 90.7614 13 88 13ZM88 12C90.2092 12 92 10.2092 92 8C92 5.79086 90.2092 4 88 4C85.7909 4 84 5.79086 84 8C84 10.2092 85.7909 12 88 12ZM87.5 5.5H88.5V6.5H87.5V5.5ZM87.5 7.5H88.5V10.5H87.5V7.5Z"
fill="white"
fill-opacity="0.67"></path> -->
{
showInfo && (
<path
d="M88 13C85.2386 13 83 10.7614 83 8C83 5.23857 85.2386 3 88 3C90.7614 3 93 5.23857 93 8C93 10.7614 90.7614 13 88 13ZM88 12C90.2092 12 92 10.2092 92 8C92 5.79086 90.2092 4 88 4C85.7909 4 84 5.79086 84 8C84 10.2092 85.7909 12 88 12ZM87.5 5.5H88.5V6.5H87.5V5.5ZM87.5 7.5H88.5V10.5H87.5V7.5Z"
class="text-current/60"
fill="currentColor"
/>
)
}
</svg>
</div>
</Tag>

46
web/src/components/ScoreSquare.astro
View File

@@ -6,27 +6,39 @@ import { makeOverallScoreInfo } from '../lib/overallScore'
import { KYCNOTME_SCHEMA_MINI } from '../lib/schema'
import { transformCase } from '../lib/strings'
import type { HTMLAttributes } from 'astro/types'
import type { HTMLTag, Polymorphic } from 'astro/types'
export type Props = HTMLAttributes<'div'> & {
type Props = Polymorphic<{
as: HTMLTag
score: number
label: string
total?: number
itemReviewedId?: string
}
showInfo?: boolean
children?: never
}>
const { score, label, total = 10, class: className, itemReviewedId, ...htmlProps } = Astro.props
const {
as: Tag = 'div',
score,
label,
total = 10,
class: className,
itemReviewedId,
showInfo = false,
...htmlProps
} = Astro.props
const { text, classNameBg, formattedScore } = makeOverallScoreInfo(score, total)
---
<div
<Tag
{...htmlProps}
class={cn(
'2xs:size-24 relative flex aspect-square size-18 flex-col items-center justify-start text-white',
className
)}
role="group"
role={htmlProps.role ?? 'group'}
>
{
!!itemReviewedId && (
@@ -48,15 +60,17 @@ const { text, classNameBg, formattedScore } = makeOverallScoreInfo(score, total)
/>
)
}
<!-- <svg
class="absolute top-0.5 left-[calc(50%+48px/2+2px)] size-3 text-current/60"
viewBox="0 0 12 12"
fill="currentColor"
>
<path
d="M6 11C3.23857 11 1 8.7614 1 6C1 3.23857 3.23857 1 6 1C8.7614 1 11 3.23857 11 6C11 8.7614 8.7614 11 6 11ZM6 10C8.20915 10 10 8.20915 10 6C10 3.79086 8.20915 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20915 3.79086 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z"
></path>
</svg> -->
{
showInfo && (
<svg
class="absolute top-0.5 left-[calc(50%+48px/2+2px)] size-3 text-current/60"
viewBox="0 0 12 12"
fill="currentColor"
>
<path d="M6 11C3.23857 11 1 8.7614 1 6C1 3.23857 3.23857 1 6 1C8.7614 1 11 3.23857 11 6C11 8.7614 8.7614 11 6 11ZM6 10C8.20915 10 10 8.20915 10 6C10 3.79086 8.20915 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20915 3.79086 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z" />
</svg>
)
}
<div
class={cn(
@@ -77,4 +91,4 @@ const { text, classNameBg, formattedScore } = makeOverallScoreInfo(score, total)
</div>
<span class="text-xs leading-none tracking-wide text-current/80">{text}</span>
</div>
</Tag>