mirror of
https://github.com/lukevella/rallly.git
synced 2025-08-01 23:48:53 +02:00
⚡️ Use image for vote icons
This commit is contained in:
Luke Vella
parent
fe2dac7ef5
commit
8ce9778a65
5 changed files with 47 additions and 26 deletions
3
apps/web/public/static/images/if-need-be.svg
Normal file
3
apps/web/public/static/images/if-need-be.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM13.106 10.447C12.796 9.827 12.52 9.433 12.293 9.207C12.116 9.03 12.02 9.004 12 9C11.98 9.004 11.884 9.03 11.707 9.207C11.481 9.433 11.204 9.827 10.895 10.447C10.538 11.161 10.148 11.767 9.707 12.207C9.265 12.65 8.692 13 8 13C7.308 13 6.735 12.65 6.293 12.207C5.853 11.767 5.463 11.161 5.106 10.447C5.04609 10.3294 5.01004 10.2011 4.99995 10.0695C4.98985 9.93793 5.0059 9.80564 5.04718 9.68029C5.08845 9.55493 5.15413 9.43898 5.24043 9.33913C5.32673 9.23928 5.43194 9.1575 5.55 9.0985C5.66806 9.0395 5.79663 9.00446 5.92829 8.99539C6.05996 8.98632 6.19212 9.0034 6.31715 9.04566C6.44218 9.08791 6.55761 9.15449 6.65679 9.24156C6.75597 9.32864 6.83693 9.43449 6.895 9.553C7.205 10.173 7.481 10.566 7.707 10.793C7.884 10.97 7.98 10.997 8 11C8.02 10.996 8.116 10.97 8.293 10.793C8.519 10.567 8.796 10.173 9.106 9.553C9.463 8.839 9.853 8.233 10.293 7.793C10.735 7.35 11.308 7 12 7C12.692 7 13.265 7.35 13.707 7.793C14.147 8.233 14.537 8.839 14.895 9.553C14.9537 9.67053 14.9887 9.79848 14.9979 9.92953C15.0072 10.0606 14.9905 10.1922 14.9489 10.3168C14.9073 10.4414 14.8416 10.5566 14.7555 10.6558C14.6694 10.755 14.5645 10.8363 14.447 10.895C14.3295 10.9537 14.2015 10.9887 14.0705 10.9979C13.9394 11.0072 13.8078 10.9905 13.6832 10.9489C13.5586 10.9073 13.4434 10.8416 13.3442 10.7555C13.245 10.6694 13.1637 10.5645 13.105 10.447H13.106ZM11.996 9H12H11.998H11.996Z" fill="#FFB900"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
3
apps/web/public/static/images/no.svg
Normal file
3
apps/web/public/static/images/no.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM8.707 7.293C8.5184 7.11084 8.2658 7.01005 8.0036 7.01233C7.7414 7.0146 7.49059 7.11977 7.30518 7.30518C7.11977 7.49059 7.0146 7.7414 7.01233 8.0036C7.01005 8.2658 7.11084 8.5184 7.293 8.707L8.586 10L7.293 11.293C7.19749 11.3852 7.12131 11.4956 7.0689 11.6176C7.01649 11.7396 6.9889 11.8708 6.98775 12.0036C6.9866 12.1364 7.0119 12.2681 7.06218 12.391C7.11246 12.5139 7.18671 12.6255 7.2806 12.7194C7.3745 12.8133 7.48615 12.8875 7.60905 12.9378C7.73194 12.9881 7.86362 13.0134 7.9964 13.0123C8.12918 13.0111 8.2604 12.9835 8.3824 12.9311C8.50441 12.8787 8.61475 12.8025 8.707 12.707L10 11.414L11.293 12.707C11.4816 12.8892 11.7342 12.99 11.9964 12.9877C12.2586 12.9854 12.5094 12.8802 12.6948 12.6948C12.8802 12.5094 12.9854 12.2586 12.9877 11.9964C12.99 11.7342 12.8892 11.4816 12.707 11.293L11.414 10L12.707 8.707C12.8892 8.5184 12.99 8.2658 12.9877 8.0036C12.9854 7.7414 12.8802 7.49059 12.6948 7.30518C12.5094 7.11977 12.2586 7.0146 11.9964 7.01233C11.7342 7.01005 11.4816 7.11084 11.293 7.293L10 8.586L8.707 7.293Z" fill="#99A1AF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
3
apps/web/public/static/images/pending.svg
Normal file
3
apps/web/public/static/images/pending.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 5.313C4 4.811 4.163 4.303 4.488 3.791C4.813 3.273 5.288 2.845 5.912 2.507C6.536 2.17 7.264 2 8.096 2C8.869 2 9.552 2.143 10.144 2.428C10.736 2.708 11.192 3.091 11.512 3.578C11.837 4.063 12 4.592 12 5.162C12 5.612 11.907 6.005 11.72 6.343C11.539 6.682 11.32 6.975 11.064 7.223C10.814 7.466 10.36 7.878 9.704 8.46C9.54953 8.59724 9.40265 8.74279 9.264 8.896C9.094 9.08223 8.96821 9.30441 8.896 9.546C8.869 9.646 8.826 9.826 8.768 10.085C8.667 10.635 8.349 10.909 7.816 10.909C7.55494 10.9152 7.30198 10.8182 7.112 10.639C6.925 10.459 6.832 10.193 6.832 9.839C6.832 9.395 6.902 9.012 7.04 8.689C7.179 8.362 7.363 8.077 7.592 7.834C7.822 7.585 8.131 7.292 8.52 6.954C8.861 6.658 9.107 6.436 9.256 6.288C9.40788 6.13849 9.53723 5.96771 9.64 5.781C9.747 5.596 9.8 5.395 9.8 5.178C9.8 4.756 9.64 4.398 9.32 4.108C9.005 3.818 8.597 3.672 8.096 3.672C7.509 3.672 7.077 3.82 6.8 4.116C6.523 4.406 6.288 4.838 6.096 5.408C5.915 6.005 5.571 6.304 5.064 6.304C4.92292 6.30659 4.78278 6.28044 4.65212 6.22715C4.52147 6.17385 4.40302 6.09453 4.304 5.994C4.101 5.785 4 5.557 4 5.315V5.313ZM7.904 14C7.59047 14.0041 7.28618 13.8939 7.048 13.69C6.808 13.48 6.688 13.186 6.688 12.811C6.688 12.478 6.805 12.198 7.04 11.971C7.275 11.744 7.563 11.631 7.904 11.631C8.24 11.631 8.523 11.744 8.752 11.971C8.982 12.198 9.096 12.478 9.096 12.811C9.096 13.181 8.976 13.471 8.736 13.683C8.496 13.894 8.219 14 7.904 14Z" fill="#D1D5DC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
3
apps/web/public/static/images/yes.svg
Normal file
3
apps/web/public/static/images/yes.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18ZM13.707 8.707C13.8892 8.5184 13.99 8.2658 13.9877 8.0036C13.9854 7.7414 13.8802 7.49059 13.6948 7.30518C13.5094 7.11977 13.2586 7.0146 12.9964 7.01233C12.7342 7.01005 12.4816 7.11084 12.293 7.293L9 10.586L7.707 9.293C7.5184 9.11084 7.2658 9.01005 7.0036 9.01233C6.7414 9.0146 6.49059 9.11977 6.30518 9.30518C6.11977 9.49059 6.0146 9.7414 6.01233 10.0036C6.01005 10.2658 6.11084 10.5184 6.293 10.707L8.293 12.707C8.48053 12.8945 8.73484 12.9998 9 12.9998C9.26516 12.9998 9.51947 12.8945 9.707 12.707L13.707 8.707Z" fill="#00C950"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 988 B |
|
|
@ -1,51 +1,60 @@
|
|||
import type { VoteType } from "@rallly/database";
|
||||
import { IfNeedBeIcon, NoIcon, PendingIcon, YesIcon } from "@rallly/icons";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { useTranslation } from "@/i18n/client";
|
||||
import { cn } from "@rallly/ui";
|
||||
import * as React from "react";
|
||||
|
||||
const VoteIcon: React.FunctionComponent<{
|
||||
const VoteIcon = ({
|
||||
type,
|
||||
size = "md",
|
||||
className,
|
||||
}: {
|
||||
type?: VoteType;
|
||||
size?: "sm" | "md";
|
||||
className?: string;
|
||||
}> = ({ type, className, size = "md" }) => {
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const iconSize = size === "md" ? 20 : 14;
|
||||
switch (type) {
|
||||
case "yes":
|
||||
return (
|
||||
<YesIcon
|
||||
className={cn("text-green-500", className, {
|
||||
"size-5": size === "md",
|
||||
"h-3": size === "sm",
|
||||
})}
|
||||
<Image
|
||||
className={cn("select-none", className)}
|
||||
src="/static/images/yes.svg"
|
||||
alt={t("yes")}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
/>
|
||||
);
|
||||
|
||||
case "ifNeedBe":
|
||||
return (
|
||||
<IfNeedBeIcon
|
||||
className={cn("text-amber-400", className, {
|
||||
"size-5": size === "md",
|
||||
"h-3": size === "sm",
|
||||
})}
|
||||
<Image
|
||||
className={cn("select-none", className)}
|
||||
src="/static/images/if-need-be.svg"
|
||||
alt={t("ifNeedBe")}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
/>
|
||||
);
|
||||
|
||||
case "no":
|
||||
return (
|
||||
<NoIcon
|
||||
className={cn("text-gray-400", className, {
|
||||
"size-5": size === "md",
|
||||
"h-3": size === "sm",
|
||||
})}
|
||||
<Image
|
||||
className={cn("select-none", className)}
|
||||
src="/static/images/no.svg"
|
||||
alt={t("no")}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<PendingIcon
|
||||
className={cn("text-gray-300", className, {
|
||||
"size-5": size === "md",
|
||||
"h-3": size === "sm",
|
||||
})}
|
||||
<Image
|
||||
className={cn("select-none", className)}
|
||||
src="/static/images/pending.svg"
|
||||
alt={t("pending", { defaultValue: "Pending" })}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue