shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify performance domain practice layout

Browse Source
This commit is contained in:
ittoview
2026-05-13 18:44:57 +01:00
parent 67436d20fc
commit 49dcbc4e59
1 changed files with 125 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
src/pages/PerformanceDomainPracticePage.tsx
View File

@@ -1,10 +1,11 @@
import { useEffect, useMemo, useState, type ReactNode } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { motion } from 'framer-motion'
import { Link } from 'react-router-dom'
import clsx from 'clsx'
import {
AlertTriangle,
BarChart3,
CheckCircle2,
GitBranch,
GraduationCap,
Handshake,
@@ -13,6 +14,7 @@ import {
Target,
Users,
Workflow,
XCircle,
} from 'lucide-react'
import { CelebrationAnimation } from '@/components/practice/CelebrationAnimation'
import {
@@ -45,16 +47,7 @@ interface AnswerState {
isCorrect: boolean
}
interface CircularProgressProps {
value: number
total: number
size: number
strokeWidth: number
className?: string
children?: ReactNode
}
const STORAGE_KEY = 'performance-domain-practice-progress-v2'
const STORAGE_KEY = 'performance-domain-practice-progress-v3'
const scopeOptions: Array<{ value: PracticeScope; label: string }> = [
{ value: 'all', label: '全部' },
@@ -78,17 +71,6 @@ const iconMap = {
PD08: AlertTriangle,
} as const
const desktopPositions = [
'left-6 top-10',
'left-1/2 top-1 -translate-x-1/2',
'right-6 top-10',
'right-1 top-1/2 -translate-y-[118%]',
'right-6 bottom-10',
'left-1/2 bottom-1 -translate-x-1/2',
'left-6 bottom-10',
'left-1 top-1/2 translate-y-[18%]',
] as const
function shuffleArray<T>(items: T[]): T[] {
const result = [...items]
for (let i = result.length - 1; i > 0; i -= 1) {
@@ -180,11 +162,10 @@ function getStoredProgress(questions: PracticeQuestion[]): PracticeProgress {
const missingIds = filteredIds.filter(
(id) => !completedIds.includes(id) && !queue.includes(id)
)
const mergedQueue = [...queue, ...shuffleArray(missingIds)]
return {
scope,
queue: mergedQueue,
queue: [...queue, ...shuffleArray(missingIds)],
completedIds,
totalCount: filteredIds.length,
correctCount: Math.max(Number(parsed.correctCount) || 0, 0),
@@ -196,66 +177,6 @@ function getStoredProgress(questions: PracticeQuestion[]): PracticeProgress {
}
}
function CircularProgress({
value,
total,
size,
strokeWidth,
className,
children,
}: CircularProgressProps) {
const clampedTotal = total > 0 ? total : 1
const ratio = Math.min(Math.max(value / clampedTotal, 0), 1)
const radius = (size - strokeWidth) / 2
const circumference = 2 * Math.PI * radius
const dashOffset = circumference * (1 - ratio)
return (
<div
className={clsx(
'relative flex items-center justify-center',
className
)}
style={{ width: size, height: size }}
>
<svg
width={size}
height={size}
viewBox={`0 0 ${size} ${size}`}
className="-rotate-90"
>
<circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="currentColor"
strokeWidth={strokeWidth}
fill="none"
className="text-white/70 dark:text-gray-700"
/>
<motion.circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="currentColor"
strokeWidth={strokeWidth}
strokeLinecap="round"
fill="none"
strokeDasharray={circumference}
animate={{ strokeDashoffset: dashOffset }}
transition={{ duration: 0.35, ease: 'easeOut' }}
className="text-indigo-500 dark:text-indigo-400"
/>
</svg>
{children && (
<div className="absolute inset-0 flex items-center justify-center">
{children}
</div>
)}
</div>
)
}
export default function PerformanceDomainPracticePage() {
const questionBank = useMemo(() => buildQuestionBank(), [])
const questionMap = useMemo(
@@ -280,12 +201,11 @@ export default function PerformanceDomainPracticePage() {
? performanceDomainMap.get(answerState.selectedDomainId) ?? null
: null
const isFinished = progress.totalCount > 0 && progress.queue.length === 0
const displayCompletedCount =
progress.completedIds.length + (answerState?.isCorrect ? 1 : 0)
const remainingCount = Math.max(progress.totalCount - displayCompletedCount, 0)
const completedCount = progress.completedIds.length + (answerState?.isCorrect ? 1 : 0)
const remainingCount = Math.max(progress.totalCount - completedCount, 0)
const accuracyBase = progress.correctCount + progress.wrongCount
const accuracy =
accuracyBase > 0 ? Math.round((progress.correctCount / accuracyBase) * 100) : 0
const accuracy = accuracyBase > 0 ? Math.round((progress.correctCount / accuracyBase) * 100) : 0
const progressPercent = progress.totalCount > 0 ? (completedCount / progress.totalCount) * 100 : 0
useEffect(() => {
try {
@@ -296,9 +216,7 @@ export default function PerformanceDomainPracticePage() {
}, [progress])
useEffect(() => {
if (isFinished) {
setShowCelebration(true)
}
if (isFinished) setShowCelebration(true)
}, [isFinished])
const restartPractice = (scope = progress.scope) => {
@@ -316,12 +234,10 @@ export default function PerformanceDomainPracticePage() {
if (!currentQuestionId) return
setAnswerState(null)
setProgress((prev) => {
if (prev.queue[0] !== currentQuestionId) return prev
const [, ...restQueue] = prev.queue
if (isCorrect) {
return {
...prev,
@@ -355,7 +271,7 @@ export default function PerformanceDomainPracticePage() {
}))
}
const renderOptionButton = (domainId: string, className?: string) => {
const renderOptionButton = (domainId: string) => {
const domain = performanceDomainMap.get(domainId)
if (!domain) return null
@@ -371,64 +287,51 @@ export default function PerformanceDomainPracticePage() {
<motion.button
key={domain.id}
type="button"
whileHover={!isAnswerShown ? { y: -2 } : undefined}
whileTap={!isAnswerShown ? { scale: 0.98 } : undefined}
onClick={() => handleSelect(domain.id)}
disabled={isAnswerShown}
className={clsx(
'w-full rounded-2xl border bg-white/95 px-4 py-3 text-left shadow-sm transition-all backdrop-blur-sm dark:bg-gray-800/95',
'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600',
isAnswerShown && 'cursor-default',
!isAnswerShown && 'hover:shadow-md',
'relative flex min-h-[84px] items-center gap-3 rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
isAnswerShown && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
shouldHighlightCorrect &&
'border-emerald-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-950/40',
'border-emerald-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-950/30',
isWrongSelected &&
'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/40',
className
'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/30'
)}
>
<div className="flex items-center gap-3">
<div
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white shadow-sm"
className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-white"
style={{ backgroundColor: domain.color }}
>
<Icon size={18} />
<Icon size={20} />
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-semibold text-gray-900 dark:text-white">
{domain.name}
</div>
<div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
<div className="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400">
{domain.nameEn}
</div>
</div>
</div>
{isAnswerShown && (
<div className="mt-3 flex flex-wrap gap-2">
{isCorrectSelected && (
<span className="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
正确
</span>
<CheckCircle2 className="absolute right-3 top-3 text-emerald-500" size={18} />
)}
{isWrongSelected && (
<span className="rounded-full bg-rose-100 px-2.5 py-1 text-xs font-medium text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">
你的选择
</span>
<XCircle className="absolute right-3 top-3 text-rose-500" size={18} />
)}
{shouldHighlightCorrect && !isCorrectSelected && (
<span className="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
正确答案
<span className="absolute right-3 top-3 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
正确
</span>
)}
</div>
)}
</motion.button>
)
}
return (
<div className="space-y-5">
<div className="mx-auto max-w-6xl space-y-4">
{showCelebration && (
<CelebrationAnimation onComplete={() => setShowCelebration(false)} />
)}
@@ -436,19 +339,14 @@ export default function PerformanceDomainPracticePage() {
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="space-y-1">
<nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
<Link
to="/performance-domains"
className="hover:text-indigo-600 dark:hover:text-indigo-400"
>
<Link to="/performance-domains" className="hover:text-indigo-600 dark:hover:text-indigo-400">
绩效域
</Link>
<span>/</span>
<span className="text-gray-900 dark:text-white">练习</span>
</nav>
<div>
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
八大绩效域练习
</h1>
<h1 className="text-xl font-bold text-gray-900 dark:text-white">八大绩效域练习</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">
根据预期目标和绩效要点，判断对应的绩效域。
</p>
@@ -465,6 +363,8 @@ export default function PerformanceDomainPracticePage() {
</button>
</div>
<div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
<div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex flex-wrap gap-2">
{scopeOptions.map((option) => {
const isActive = option.value === progress.scope
@@ -477,7 +377,7 @@ export default function PerformanceDomainPracticePage() {
'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
isActive
? 'bg-indigo-600 text-white'
: 'bg-white text-gray-600 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
)}
>
{option.label}
@@ -486,68 +386,52 @@ export default function PerformanceDomainPracticePage() {
})}
</div>
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 rounded-2xl bg-white px-4 py-3 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
<div className="text-sm text-gray-600 dark:text-gray-300">
已完成
<span className="ml-2 font-semibold text-gray-900 dark:text-white">
{displayCompletedCount} / {progress.totalCount}
</span>
<div className="flex flex-wrap gap-x-5 gap-y-1 text-sm text-gray-600 dark:text-gray-300">
<span>已完成 <b className="text-gray-900 dark:text-white">{completedCount}/{progress.totalCount}</b></span>
<span>剩余 <b className="text-gray-900 dark:text-white">{remainingCount}</b></span>
<span>正确率 <b className="text-gray-900 dark:text-white">{accuracy}%</b></span>
<span>错误 <b className="text-gray-900 dark:text-white">{progress.wrongCount}</b></span>
</div>
<div className="text-sm text-gray-600 dark:text-gray-300">
剩余
<span className="ml-2 font-semibold text-gray-900 dark:text-white">
{remainingCount}
</span>
</div>
<div className="text-sm text-gray-600 dark:text-gray-300">
正确率
<span className="ml-2 font-semibold text-gray-900 dark:text-white">
{accuracy}%
</span>
</div>
<div className="text-sm text-gray-600 dark:text-gray-300">
错误次数
<span className="ml-2 font-semibold text-gray-900 dark:text-white">
{progress.wrongCount}
</span>
<div className="mt-4 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
<div
className="h-full rounded-full bg-indigo-600 transition-all duration-300"
style={{ width: `${progressPercent}%` }}
/>
</div>
</div>
{isFinished ? (
<motion.div
initial={{ opacity: 0, y: 12 }}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
className="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700"
className="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700"
>
<div className="bg-gradient-to-r from-indigo-500 via-violet-500 to-cyan-500 px-6 py-8 text-white">
<div className="bg-indigo-600 px-6 py-7 text-white">
<div className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm">
<GraduationCap size={16} />
本轮完成
</div>
<h2 className="mt-4 text-3xl font-bold">八大绩效域练习已完成</h2>
<h2 className="mt-4 text-2xl font-bold">八大绩效域练习已完成</h2>
<p className="mt-2 text-sm text-white/80">
共完成 {progress.totalCount} 题，错误 {progress.wrongCount} 次。
</p>
</div>
<div className="grid gap-4 px-6 py-6 md:grid-cols-3">
<div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
<div className="rounded-xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
<div className="text-sm text-gray-500 dark:text-gray-400">总题数</div>
<div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
{progress.totalCount}
<div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{progress.totalCount}</div>
</div>
</div>
<div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
<div className="rounded-xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
<div className="text-sm text-gray-500 dark:text-gray-400">正确率</div>
<div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
{accuracy}%
<div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{accuracy}%</div>
</div>
</div>
<div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
<div className="rounded-xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
<div className="text-sm text-gray-500 dark:text-gray-400">当前范围</div>
<div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
{scopeOptions.find((option) => option.value === progress.scope)?.label ??
'全部'}
{scopeOptions.find((option) => option.value === progress.scope)?.label ?? '全部'}
</div>
</div>
</div>
@@ -570,178 +454,71 @@ export default function PerformanceDomainPracticePage() {
</div>
</motion.div>
) : currentQuestion ? (
<div className="overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-50 via-white to-cyan-50 p-4 shadow-sm ring-1 ring-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 dark:ring-gray-700 lg:p-6">
<div className="lg:hidden">
<div className="mb-4 flex items-center gap-4 rounded-3xl bg-white/85 px-4 py-4 shadow-sm ring-1 ring-gray-100 backdrop-blur-sm dark:bg-gray-800/85 dark:ring-gray-700">
<CircularProgress value={displayCompletedCount} total={progress.totalCount} size={82} strokeWidth={8}>
<div className="text-center">
<div className="text-lg font-bold text-gray-900 dark:text-white">
{displayCompletedCount}
</div>
<div className="text-[11px] text-gray-500 dark:text-gray-400">
/ {progress.totalCount}
</div>
</div>
</CircularProgress>
<div className="space-y-2">
<div className="inline-flex rounded-full bg-indigo-600 px-3 py-1 text-sm font-medium text-white">
<div className="grid gap-4 xl:grid-cols-[1fr_1.45fr]">
<section className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
<div className="flex items-center justify-between gap-3">
<span className="rounded-full bg-indigo-50 px-3 py-1 text-sm font-medium text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-300">
{kindLabelMap[currentQuestion.kind]}
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
剩余 {remainingCount} 题
</div>
</div>
</span>
<span className="text-sm text-gray-500 dark:text-gray-400">
{completedCount + 1} / {progress.totalCount}
</span>
</div>
<div className="rounded-3xl bg-white px-5 py-6 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
<div className="flex min-h-[160px] items-center">
<p className="text-xl font-semibold leading-9 text-gray-900 dark:text-white">
<div className="flex min-h-[180px] items-center py-6 md:min-h-[220px] xl:min-h-[300px]">
<p className="text-2xl font-semibold leading-relaxed text-gray-900 dark:text-white md:text-3xl">
{currentQuestion.text}
</p>
</div>
</div>
<motion.div
initial={false}
animate={{ opacity: answerState ? 1 : 0.96 }}
<div
className={clsx(
'mt-4 min-h-[124px] rounded-2xl border px-4 py-4 shadow-sm',
'min-h-[104px] rounded-xl border px-4 py-3 transition-colors',
answerState?.isCorrect
? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/30'
: answerState
? 'border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30'
: 'border-white/70 bg-white/80 dark:border-gray-700 dark:bg-gray-800/80'
? 'border-rose-200 bg-rose-50 dark:border-rose-800 dark:bg-rose-950/30'
: 'border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/30'
)}
>
{answerState && currentDomain ? (
<div className="flex h-full flex-col justify-between gap-3">
<div className="space-y-1">
<div>
<div
className={clsx(
'text-sm font-semibold',
'flex items-center gap-2 text-sm font-semibold',
answerState.isCorrect
? 'text-emerald-700 dark:text-emerald-300'
: 'text-amber-700 dark:text-amber-300'
: 'text-rose-700 dark:text-rose-300'
)}
>
{answerState.isCorrect ? <CheckCircle2 size={17} /> : <XCircle size={17} />}
{answerState.isCorrect
? '回答正确'
: `你选了 ${selectedDomain?.name ?? ''}，正确答案是 ${currentDomain.name}`}
? `正确：${currentDomain.name}`
: `错误：你选了 ${selectedDomain?.name ?? ''}`}
</div>
<p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
{answerState.isCorrect
? '这题已答对。'
: '这题已放到后面，稍后会再出现。'}
{!answerState.isCorrect && (
<p className="mt-1 text-sm text-gray-700 dark:text-gray-300">
正确答案：{currentDomain.name}。这题会放到后面再练。
</p>
)}
</div>
<div className="flex justify-center">
<button
type="button"
onClick={() => advanceToNext(answerState.isCorrect)}
className="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
className="self-start rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
>
下一个
</button>
</div>
) : null}
</div>
) : (
<div className="h-full" />
)}
</motion.div>
</section>
<div className="mt-4 grid gap-3 sm:grid-cols-2">
<section className="grid gap-3 sm:grid-cols-2">
{performanceDomains.map((domain) => renderOptionButton(domain.id))}
</div>
</div>
<div className="hidden lg:block">
<div className="relative mx-auto h-[38rem] max-w-6xl overflow-hidden rounded-[2rem]">
<CircularProgress
value={displayCompletedCount}
total={progress.totalCount}
size={430}
strokeWidth={16}
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-indigo-500"
/>
<div className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4">
<div className="mb-4 flex items-center justify-center gap-3">
<span className="rounded-full bg-white/90 px-3 py-1 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-700">
已完成 {displayCompletedCount} / {progress.totalCount}
</span>
<span className="rounded-full bg-indigo-600 px-3 py-1 text-sm font-medium text-white">
{kindLabelMap[currentQuestion.kind]}
</span>
</div>
<div className="rounded-[2rem] bg-white/95 px-6 py-7 text-center shadow-xl ring-1 ring-gray-100 backdrop-blur-sm dark:bg-gray-800/95 dark:ring-gray-700">
<div className="flex min-h-[220px] items-center justify-center">
<p className="text-2xl font-semibold leading-10 text-gray-900 dark:text-white">
{currentQuestion.text}
</p>
</div>
</div>
<motion.div
initial={false}
animate={{ opacity: answerState ? 1 : 0.96 }}
className={clsx(
'mt-4 min-h-[132px] rounded-2xl border px-4 py-4 shadow-sm',
answerState?.isCorrect
? 'border-emerald-200 bg-emerald-50/95 dark:border-emerald-800 dark:bg-emerald-950/40'
: answerState
? 'border-amber-200 bg-amber-50/95 dark:border-amber-800 dark:bg-amber-950/40'
: 'border-white/70 bg-white/85 dark:border-gray-700 dark:bg-gray-800/85'
)}
>
{answerState && currentDomain ? (
<div className="flex h-full flex-col justify-between gap-3">
<div className="space-y-1">
<div
className={clsx(
'text-sm font-semibold',
answerState.isCorrect
? 'text-emerald-700 dark:text-emerald-300'
: 'text-amber-700 dark:text-amber-300'
)}
>
{answerState.isCorrect
? '回答正确'
: `你选了 ${selectedDomain?.name ?? ''}，正确答案是 ${currentDomain.name}`}
</div>
<p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
{answerState.isCorrect
? '这题已答对。'
: '这题已放到后面，稍后会再出现。'}
</p>
</div>
<div className="flex justify-center">
<button
type="button"
onClick={() => advanceToNext(answerState.isCorrect)}
className="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
>
下一个
</button>
</div>
</div>
) : (
<div className="h-full" />
)}
</motion.div>
</div>
{performanceDomains.map((domain, index) => (
<div
key={domain.id}
className={clsx('absolute w-56', desktopPositions[index])}
>
{renderOptionButton(domain.id)}
</div>
))}
</div>
</div>
</section>
</div>
) : null}
</div>