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

6
components/vote/ParticipantsList.tsx
View File

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

1
models/allVotes.model.ts
View File

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

1
models/vote.model.ts
View File

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