Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added description field to votes

This commit is contained in:
Atash03 2025-05-07 16:05:59 +05:00
parent bb70710c65
commit 0f7e32d067
4 changed files with 81 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/vote/ParticipantCard.tsx
View File

@ -1,14 +1,15 @@
'use client';
"use client";
import Image from 'next/image';
import placeholder from '@/public/person placeholder.svg';
import clsx from 'clsx';
import { motion, usePresence, Variant, Transition } from 'framer-motion';
import RollingCounter from 'react-slot-counter';
import Image from "next/image";
import placeholder from "@/public/person placeholder.svg";
import clsx from "clsx";
import { motion, usePresence, Variant, Transition } from "framer-motion";
import RollingCounter from "react-slot-counter";
interface IProps {
number: number;
name: string | null;
description: string | null;
photo: string | null;
votes: number;
progress: number;
@ -24,6 +25,7 @@ interface IProps {
const ParticipantCard = ({
number,
name,
description,
photo,
votes,
progress,
@ -37,7 +39,7 @@ const ParticipantCard = ({
const substractedProgress = progress > 99 ? progress - 2 : progress;
const transition: Transition = {
type: 'spring',
type: "spring",
stiffness: 500,
damping: 50,
mass: 1,
@ -48,11 +50,11 @@ const ParticipantCard = ({
const animations = {
layout: true,
initial: 'out',
initial: "out",
style: {
position: (isPresent ? 'static' : 'absolute') as 'static' | 'absolute', // Corrected cast
position: (isPresent ? "static" : "absolute") as "static" | "absolute", // Corrected cast
},
animate: isPresent ? 'in' : 'out',
animate: isPresent ? "in" : "out",
variants: {
in: { scaleY: 1, opacity: 1 },
out: { scaleY: 0, opacity: 0, zIndex: -1 },
@ -66,7 +68,8 @@ const ParticipantCard = ({
////////////////////////////////////////////// Winner card
<motion.div
// {...animations}
className="flex flex-col overflow-hidden bg-fillNavyBlue max-w-[940px] w-full group">
className="flex flex-col overflow-hidden bg-fillNavyBlue max-w-[940px] w-full group"
>
<div className="flex items-center gap-[5px] sm:gap-[20px] p-[5px] pt-[10px] w-full">
<h3 className="text-[26px] sm:text-[80px] leading-[100%] font-bold text-fillNavyBlue text-stroke">
{number}
@ -78,8 +81,9 @@ const ParticipantCard = ({
fill
src={photo}
alt={name}
className={clsx(' object-cover', {
'group-hover:scale-110 transition-all duration-300 ease-out': hasUrl,
className={clsx(" object-cover", {
"group-hover:scale-110 transition-all duration-300 ease-out":
hasUrl,
})}
unoptimized
unselectable="off"
@ -91,9 +95,10 @@ const ParticipantCard = ({
<Image
fill
src={placeholder}
alt={'placeholder'}
className={clsx(' object-cover', {
'group-hover:scale-110 transition-all duration-300 ease-out': hasUrl,
alt={"placeholder"}
className={clsx(" object-cover", {
"group-hover:scale-110 transition-all duration-300 ease-out":
hasUrl,
})}
unoptimized
unselectable="off"
@ -106,17 +111,31 @@ const ParticipantCard = ({
{name ? (
<h2
className={clsx(
'text-[18px] transition-all sm:text-[24px] leading-[100%] font-bold text-white',
"text-[18px] transition-all sm:text-[24px] leading-[100%] font-bold text-white",
{
// 'group-hover:text-[28px] transition-all duration-300 ease-out': hasUrl,
},
)}>
}
)}
>
{name}
</h2>
) : null}
{description ? (
<p
className={clsx(
"text-[14px] transition-all font-[400] text-[#B7B7D1]",
{
// 'group-hover:text-[28px] transition-all duration-300 ease-out': hasUrl,
}
)}
>
{description}
</p>
) : null}
{/* If we have voteCode and voting not closed, then show badge with code. Else dont show */}
{voteCode && voteStatus !== 'closed' ? (
{voteCode && voteStatus !== "closed" ? (
// Desktop version
<p className="hidden sm:block py-[10px] px-[8px] bg-[#1E1E7B] text-fillLightGray text-[14px] leading-[125%] max-w-[232px] rounded-[10px]">
Ses bermek üçin
@ -146,13 +165,13 @@ const ParticipantCard = ({
</div>
{/* If we have voteCode and voting not closed, then show badge with code. Else dont show */}
{voteCode && voteStatus !== 'closed' ? (
{voteCode && voteStatus !== "closed" ? (
// Mobile version
<p className="block sm:hidden py-[10px] px-[4px] font-medium bg-[#1E1E7B] rounded-md text-fillLightGray text-[10px] leading-[125%] ">
Ses bermek üçin{' '}
Ses bermek üçin{" "}
<span className="inline-block w-fit px-1 py-[4px] mx-[4px] font-bold text-white text-[16px] border rounded-md">
{voteCode}
</span>{' '}
</span>{" "}
ugrat
</p>
) : null}
@ -164,15 +183,18 @@ const ParticipantCard = ({
// {...animations}
>
<div className="flex items-center gap-[5px] sm:gap-[20px] max-w-[900px] w-full px-[5px] sm:p-0">
<h3 className="w-[24px] text-[16px] sm:text-[20px] leading-[100%] font-bold">{number}</h3>
<h3 className="w-[24px] text-[16px] sm:text-[20px] leading-[100%] font-bold">
{number}
</h3>
{photo && name ? (
<div className="relative min-w-[50px] rounded-[10px] overflow-hidden sm:min-w-[80px] h-[50px] sm:h-[80px]">
<Image
fill
src={photo}
alt={name}
className={clsx(' object-cover', {
'group-hover:scale-110 transition-all duration-300 ease-out': hasUrl,
className={clsx(" object-cover", {
"group-hover:scale-110 transition-all duration-300 ease-out":
hasUrl,
})}
unoptimized
unselectable="off"
@ -183,9 +205,10 @@ const ParticipantCard = ({
<Image
fill
src={placeholder}
alt={'placeholder'}
className={clsx(' object-cover', {
'group-hover:scale-110 transition-all duration-300 ease-out': hasUrl,
alt={"placeholder"}
className={clsx(" object-cover", {
"group-hover:scale-110 transition-all duration-300 ease-out":
hasUrl,
})}
unoptimized
unselectable="off"
@ -198,13 +221,28 @@ const ParticipantCard = ({
{name ? (
<h2
className={clsx(
'text-textBlack text-[16px] sm:text-[18px] leading-[100%] font-bold',
)}>
"text-textBlack text-[16px] sm:text-[18px] leading-[100%] font-bold"
)}
>
{name}
</h2>
) : null}
{description ? (
<p
className={clsx(
"text-[14px] transition-all font-[400] text-[#4D4D4D]",
{
// 'group-hover:text-[28px] transition-all duration-300 ease-out': hasUrl,
}
)}
>
{description}
</p>
) : null}
{/* If we have voteCode and voting not closed, then show badge with code. Else dont show */}
{voteCode && voteStatus !== 'closed' ? (
{voteCode && voteStatus !== "closed" ? (
// Desktop version
<p className="hidden sm:block py-[5px] px-[8px] bg-[#EAEAFF] text-[#9393DA] text-[14px] leading-[125%] rounded-[10px] w-fit">
Ses bermek üçin
@ -234,13 +272,13 @@ const ParticipantCard = ({
</div>
{/* If we have voteCode and voting not closed, then show badge with code. Else dont show */}
{voteCode && voteStatus !== 'closed' ? (
{voteCode && voteStatus !== "closed" ? (
// Mobile version
<p className="block sm:hidden text-[#9393DA] text-[10px] leading-[125%] w-full">
Ses bermek üçin{' '}
Ses bermek üçin{" "}
<span className="inline-block w-fit px-1 py-[4px] leading-[100%] mx-[4px] font-bold text-fillNavyBlue text-[16px] border border-fillNavyBlue rounded-md">
{voteCode}
</span>{' '}
</span>{" "}
ugrat
</p>
) : null}

6
components/vote/ParticipantsList.tsx
View File

@ -301,6 +301,7 @@ const ParticipantsList = ({ vote_id, all }: IParams) => {
voteStatus={voteStatus ? voteStatus : ""}
isFirst={index === 0 ? true : false}
name={participant.title}
description={participant.description}
progress={participant.votes_percents}
votes={participant.votes_count}
voteCode={participant.vote_code}
@ -318,6 +319,7 @@ const ParticipantsList = ({ vote_id, all }: IParams) => {
voteStatus={voteStatus ? voteStatus : ""}
isFirst={index === 0 ? true : false}
name={participant.title}
description={participant.description}
progress={participant.votes_percents}
votes={participant.votes_count}
voteCode={participant.vote_code}
@ -354,6 +356,7 @@ const ParticipantsList = ({ vote_id, all }: IParams) => {
voteStatus={voteStatus ? voteStatus : ""}
isFirst={index === 0 ? true : false}
name={participant.title}
description={participant.description}
progress={participant.votes_percents}
votes={participant.votes_count}
voteCode={participant.vote_code}
@ -371,6 +374,7 @@ const ParticipantsList = ({ vote_id, all }: IParams) => {
voteStatus={voteStatus ? voteStatus : ""}
isFirst={index === 0 ? true : false}
name={participant.title}
description={participant.description}
progress={participant.votes_percents}
votes={participant.votes_count}
voteCode={participant.vote_code}
@ -396,6 +400,7 @@ const ParticipantsList = ({ vote_id, all }: IParams) => {
voteStatus={voteStatus ? voteStatus : ""}
isFirst={index === 0 ? true : false}
name={participant.title}
description={participant.description}
progress={participant.votes_percents}
votes={participant.votes_count}
voteCode={participant.vote_code}
@ -413,6 +418,7 @@ const ParticipantsList = ({ vote_id, all }: IParams) => {
voteStatus={voteStatus ? voteStatus : ""}
isFirst={index === 0 ? true : false}
name={participant.title}
description={participant.description}
progress={participant.votes_percents}
votes={participant.votes_count}
voteCode={participant.vote_code}

1
models/allVotes.model.ts
View File

@ -20,6 +20,7 @@ export interface VotingItem {
votes_count: number;
vote_code: string;
title: null | string;
description: null | string;
photo: null | string;
votes_percents: number;
url?: string;

1
models/vote.model.ts
View File

@ -20,6 +20,7 @@ export interface VotingItem {
votes_count: number;
vote_code: string;
title: null | string;
description: null | string;
photo: null | string;
votes_percents: number;
}