Skip to content

Commit

Permalink
Merge pull request #14547 from ameeetgaikwad/TranslationLeaderboard
Browse files Browse the repository at this point in the history 
refactor: migrated TranslationLeaderboard to shadcn
  • Loading branch information
@pettinarip
pettinarip authored Dec 31, 2024
2 parents a383c82 + e3252cd commit 7ba2d7c
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 170 deletions.
6 changes: 6 additions & 0 deletions next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ module.exports = (phase, { defaultConfig }) => {
trailingSlash: true,
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
remotePatterns: [
{
protocol: "https",
hostname: "crowdin-static.downloads.crowdin.com",
},
],
},
}

Expand Down
234 changes: 64 additions & 170 deletions src/components/TranslationLeaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,78 +2,30 @@ import React, { useState } from "react"
import reverse from "lodash/reverse"
import sortBy from "lodash/sortBy"
import { useTranslation } from "next-i18next"
import {
Box,
Button as ChakraButton,
Flex,
Img,
useColorModeValue,
useRadio,
useRadioGroup,
} from "@chakra-ui/react"

import type { CostLeaderboardData } from "@/lib/types"

import Emoji from "./Emoji"
import Text from "./OldText"
import { Button } from "@/components/ui/buttons/Button"
import { Flex } from "@/components/ui/flex"

const Button = (props) => {
return (
<ChakraButton
display="flex"
borderRadius="2rem"
borderWidth="1px"
borderStyle="solid"
borderColor="text"
color="text"
alignItems="center"
py={4}
px={6}
m={2}
h="full"
cursor="pointer"
bg="transparent"
w={{ base: "full", lg: "initial" }}
justifyContent="center"
mx={{ base: "0", lg: "2" }}
_hover={{
color: "primary.base",
borderColor: "primary.base",
}}
_focus={{}}
_active={{}}
{...props}
/>
)
}
import { cn } from "@/lib/utils/cn"

const RadioCard = (props) => {
const shadow = useColorModeValue("tableBox.light", "tableBox.dark")
const { getInputProps, getCheckboxProps } = useRadio(props)

const input = getInputProps()
const checkbox = getCheckboxProps()
import Emoji from "./Emoji"
import { TwImage } from "./Image"

const RadioCard = ({ value, children, checked, onChange }) => {
return (
<Button
as="label"
{...checkbox}
_checked={{
borderColor: "primary.base",
color: "primary.base",
boxShadow: shadow,
}}
variant="ghost"
onClick={() => onChange(value)}
className={cn(
"m-2 mx-0 flex h-full w-full items-center justify-center rounded-full px-6 py-4 lg:mx-2 lg:w-auto",
checked && "border-primary text-primary shadow-md"
)}
>
<input {...input} />
<Text
as="span"
fontSize={{ base: "md", md: "lg" }}
lineHeight="100%"
textAlign="center"
fontWeight={{ base: "semibold", md: "normal" }}
>
{props.children}
</Text>
<span className="text-center text-md font-semibold leading-none md:text-lg md:font-normal">
{children}
</span>
</Button>
)
}
Expand All @@ -92,12 +44,6 @@ const TranslationLeaderboard = ({
quarterData,
allTimeData,
}: TranslationLeaderboardProps) => {
const tableBoxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
const tableItemBoxShadow = useColorModeValue(
"tableItemBox.light",
"tableItemBox.dark"
)

const leaderboardData = {
monthData: sortAndFilterData(monthData),
quarterData: sortAndFilterData(quarterData),
Expand All @@ -115,75 +61,52 @@ const TranslationLeaderboard = ({
updateFilterAmount(50)
}

const { getRadioProps } = useRadioGroup({
name: "period selection",
defaultValue: "monthData",
onChange: updateDateRangeType,
})

const { t } = useTranslation(
"page-contributing-translation-program-acknowledgements"
)

return (
<Box>
<Flex
justifyContent="center"
py={0}
px={8}
mb={8}
flexDirection={{ base: "column", lg: "inherit" }}
w="full"
>
<RadioCard key="monthData" {...getRadioProps({ value: "monthData" })}>
<div>
<Flex className="mb-8 w-full flex-col justify-center px-8 py-0 lg:flex-row">
<RadioCard
value="monthData"
checked={dateRangeType === "monthData"}
onChange={updateDateRangeType}
>
{t(
"page-contributing-translation-program-acknowledgements-translation-leaderboard-month-view"
)}
</RadioCard>
<RadioCard
key="quarterData"
{...getRadioProps({ value: "quarterData" })}
value="quarterData"
checked={dateRangeType === "quarterData"}
onChange={updateDateRangeType}
>
{t(
"page-contributing-translation-program-acknowledgements-translation-leaderboard-quarter-view"
)}
</RadioCard>
<RadioCard
key="allTimeData"
{...getRadioProps({ value: "allTimeData" })}
value="allTimeData"
checked={dateRangeType === "allTimeData"}
onChange={updateDateRangeType}
>
{t(
"page-contributing-translation-program-acknowledgements-translation-leaderboard-all-time-view"
)}
</RadioCard>
</Flex>
<Box bg="background.base" boxShadow={tableBoxShadow} w="full" mb={8}>
<Flex
bg="grayBackground"
textDecoration="none"
justifyContent="space-between"
alignItems="center"
color="text"
mb="1px"
p={4}
w="full"
>
<div className="mb-8 w-full bg-background-highlight shadow-md">
<Flex className="bg-muted text-foreground mb-[1px] w-full items-center justify-between p-4">
<Flex>
<Box w={10} opacity="0.4">
#
</Box>
<Flex
flexDirection="row"
alignItems="center"
me={8}
overflowWrap="anywhere"
>
<div className="w-10 opacity-40">#</div>
<Flex className="me-8 flex-row items-center break-words">
{t(
"page-contributing-translation-program-acknowledgements-translator"
)}
</Flex>
</Flex>
<Flex minW="20%" flexDirection="row" alignItems="start">
<Flex className="min-w-[20%] flex-row items-start">
{t(
"page-contributing-translation-program-acknowledgements-total-words"
)}
Expand All @@ -204,55 +127,35 @@ const TranslationLeaderboard = ({
}
return (
<Flex
textDecoration="none"
justifyContent="space-between"
alignItems="center"
color="text"
boxShadow={tableItemBoxShadow}
mb="1px"
py={2}
px={4}
w="full"
_hover={{
borderRadius: "base",
boxShadow: "tableItemBoxHover",
bg: "tableBackgroundHover",
}}
key={idx}
className="text-foreground hover:rounded-base hover:bg-accent/50 mb-[1px] w-full items-center justify-between px-4 py-2 shadow-sm hover:shadow-md"
>
<Flex>
{emoji ? (
<Box w={10}>
<div className="flex w-10 items-center">
{emoji ? (
<Emoji className="me-4 text-[2rem]" text={emoji} />
</Box>
) : (
<Box w={10} opacity="0.4">
{idx + 1}
</Box>
)}
<Flex
flexDirection="row"
alignItems="center"
me={8}
overflowWrap="anywhere"
>
<Img
me={4}
h={{ base: "30px", sm: 10 }}
w={{ base: "30px", sm: 10 }}
borderRadius="50%"
display={{ base: "none", s: "block" }}
src={avatarUrl}
/>
<Box maxW={{ base: "100px", sm: "none" }}>
) : (
<span className="opacity-40">{idx + 1}</span>
)}
</div>
<Flex className="me-8 flex-row items-center break-words">
<div className="relative me-4 hidden h-[30px] w-[30px] sm:block sm:h-10 sm:w-10">
<TwImage
fill
className="rounded-full object-cover"
src={avatarUrl}
alt={username}
/>
</div>
<div className="max-w-[100px] sm:max-w-none">
{username}
<Text m={0} display="block" fontSize="sm" opacity="0.6">
<span className="block text-sm opacity-60">
{langs[0]}
</Text>
</Box>
</span>
</div>
</Flex>
</Flex>
<Flex minW="20%" flexDirection="row" alignItems="start">
<Flex className="min-w-[20%] flex-row items-start">
<Emoji
text=":writing:"
className="me-2 hidden text-2xl sm:block"
Expand All @@ -262,32 +165,23 @@ const TranslationLeaderboard = ({
</Flex>
)
})}
</Box>
<Flex
justifyContent="center"
py={0}
px={8}
mb={8}
flexDirection={{ base: "column", lg: "inherit" }}
w="full"
>
<Button onClick={filterAmount === 10 ? showMore : showLess}>
<Text
as="span"
fontSize={{ base: "md", md: "lg" }}
lineHeight="100%"
textAlign="center"
fontWeight={{ base: "semibold", md: "normal" }}
>
</div>
<Flex className="mb-8 w-full flex-col justify-center px-8 py-0 lg:flex-row">
<Button
variant="ghost"
onClick={filterAmount === 10 ? showMore : showLess}
className="m-2 mx-0 flex h-full w-full items-center justify-center rounded-full px-6 py-4 lg:mx-2 lg:w-auto"
>
<span className="text-center text-md font-semibold leading-none md:text-lg md:font-normal">
{t(
filterAmount === 10
? "page-contributing-translation-program-acknowledgements-translation-leaderboard-show-more"
: "page-contributing-translation-program-acknowledgements-translation-leaderboard-show-less"
)}
</Text>
</span>
</Button>
</Flex>
</Box>
</div>
)
}

Expand Down

0 comments on commit 7ba2d7c

Please sign in to comment.