Terakhir Di Investasi Perbaikan Tampilannya

This commit is contained in:
2025-01-02 14:57:24 +08:00
parent f9e1d193e6
commit 563736548b
23 changed files with 221 additions and 84 deletions

View File

@@ -3,9 +3,9 @@ export const MainColor = {
darkblue: "#001D3D",
yellow: "#E1B525",
white: "#D4D0D0",
red: "#C74E4E",
orange: "#E58958",
green: "#468A56"
red: "#FF4B4C",
orange: "#FF7043",
green: "#4CAF4F"
};
export const AccentColor = {
@@ -14,7 +14,11 @@ export const AccentColor = {
blue: "#00447D",
softblue: "#007CBA",
skyblue: "#00BFFF",
yellow: "#E1B525",
yellow: "#F8A824",
white: "#FEFFFE"
};
//yellow: "#FFC300"
//yellow: "#FFD60A"
// white: "#FEFFFE"

View File

@@ -47,7 +47,7 @@ export function ComponentGlobal_AvatarAndUsername({
onClick={() => onCheckProfile()}
>
{visible ? (
<Avatar radius={"xl"} size={40}>
<Avatar radius={"xl"} size={40}>
<ComponentGlobal_Loader />
</Avatar>
) : (

View File

@@ -104,12 +104,15 @@ function ButtonAjukanPenggalangan({
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
<Button style={{ color: "black"}} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{
color: "black"
}}
loaderPosition="center"
loading={isLoading}
radius={"xl"}

View File

@@ -109,12 +109,13 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
<Button style={{ color: "black" }} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{ color: "black" }}
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}

View File

@@ -94,7 +94,7 @@ export default function Event_ComponentCreateButton({
}}
bg={MainColor.yellow}
color="yellow"
c={"black"}
c={MainColor.darkblue}
>
Simpan
</Button>

View File

@@ -78,6 +78,9 @@ export default function Event_Create({
},
input: {
backgroundColor: MainColor.white,
},
dropdown: {
backgroundColor: MainColor.white,
}
}}
withAsterisk

View File

@@ -18,6 +18,7 @@ import ComponentEvent_DetailData from "../../component/detail/detail_data";
import { Event_funDeleteById } from "../../fun/delete/fun_delete";
import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
import { MODEL_EVENT } from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
export default function Event_DetailDraft({
dataEvent,
@@ -125,7 +126,8 @@ function ButtonAction({
<Group grow>
<Button
radius={"xl"}
color="yellow"
c={MainColor.darkblue}
style={{ backgroundColor: AccentColor.yellow }}
onClick={() => {
setOpenModal1(true);
}}
@@ -134,7 +136,8 @@ function ButtonAction({
</Button>
<Button
radius={"xl"}
color="red"
c={AccentColor.white}
style={{ backgroundColor: MainColor.red }}
onClick={() => {
setOpenModal2(true);
}}
@@ -149,19 +152,20 @@ function ButtonAction({
opened={openModal1}
close={() => setOpenModal1(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal1(false)}>
<Button style={{ color: AccentColor.white }} radius={"xl"} onClick={() => setOpenModal1(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{ backgroundColor: AccentColor.yellow }}
loaderPosition="center"
loading={isLoadingAjukan ? true : false}
radius={"xl"}
onClick={() => {
onAjukan();
}}
color="yellow"
c={MainColor.darkblue}
>
Ajukan
</Button>

View File

@@ -15,6 +15,7 @@ import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta_by_id";
import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
export default function Event_DetailMain({
userLoginId,
@@ -56,11 +57,12 @@ export default function Event_DetailMain({
Anda Telah Ikut Serta
</Button>
) : (
<Button
<Button
style={{ backgroundColor: MainColor.green }}
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
color="green"
c={AccentColor.white}
onClick={() => {
onJoin(
userLoginId,

View File

@@ -13,6 +13,7 @@ import ComponentEvent_DetailData from "../../component/detail/detail_data";
import { Event_funDeleteById } from "../../fun/delete/fun_delete";
import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
import { MODEL_EVENT } from "../../model/interface";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
export default function Event_DetailReject({
dataEvent,
@@ -40,9 +41,10 @@ function ButtonAction({ eventId }: { eventId: string }) {
<>
<SimpleGrid cols={2}>
<Button
style={{ backgroundColor: AccentColor.yellow }}
w={"100%"}
radius={"xl"}
color="yellow"
c={MainColor.darkblue}
onClick={() => {
setOpenModal1(true);
}}
@@ -50,9 +52,10 @@ function ButtonAction({ eventId }: { eventId: string }) {
Edit Kembali
</Button>
<Button
style={{ backgroundColor: MainColor.red }}
w={"100%"}
radius={"xl"}
color="red"
c={AccentColor.white}
onClick={() => setOpenModal2(true)}
>
Hapus
@@ -65,14 +68,15 @@ function ButtonAction({ eventId }: { eventId: string }) {
opened={openModal1}
close={() => setOpenModal1(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal1(false)}>
<Button style={{ color: AccentColor.white }} radius={"xl"} onClick={() => setOpenModal1(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{ backgroundColor: AccentColor.yellow }}
radius={"xl"}
color={"yellow"}
c={MainColor.darkblue}
onClick={() => {
onUpdate(router, eventId);
setOpenModal1(false);
@@ -89,12 +93,13 @@ function ButtonAction({ eventId }: { eventId: string }) {
opened={openModal2}
close={() => setOpenModal2(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal2(false)}>
<Button style={{ color: "black" }} radius={"xl"} onClick={() => setOpenModal2(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{ color: "black" }}
radius={"xl"}
color={"red"}
onClick={() => {

View File

@@ -17,6 +17,7 @@ import { IRealtimeData } from "@/app/lib/global_state";
import { WibuRealtime } from "wibu-pkg";
import { event_checkStatus } from "../../fun/get/fun_check_status_by_id";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
export default function Event_DetailReview({
dataEvent,
@@ -39,7 +40,7 @@ function ButtonAction({ eventId }: { eventId: string }) {
const [openModal, setOpenModal] = useState(false);
return (
<>
<Button radius={"xl"} color={"orange"} onClick={() => setOpenModal(true)}>
<Button radius={"xl"} style={{ backgroundColor: MainColor.orange }} c={MainColor.darkblue} onClick={() => setOpenModal(true)}>
Batalkan Review
</Button>
@@ -48,16 +49,17 @@ function ButtonAction({ eventId }: { eventId: string }) {
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
<Button style={{ color: AccentColor.white }} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{ backgroundColor: MainColor.orange }}
loaderPosition="center"
loading={isLoading}
radius={"xl"}
color={"orange"}
c={MainColor.darkblue}
onClick={() => onClick(router, eventId, setLoading)}
>
Simpan

View File

@@ -50,8 +50,14 @@ export default function Event_Edit({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
}}
label="Judul"
placeholder="judul"
@@ -76,7 +82,16 @@ export default function Event_Edit({
<Select
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
},
dropdown: {
backgroundColor: MainColor.white,
},
}}
withAsterisk
@@ -100,8 +115,14 @@ export default function Event_Edit({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
}}
label="Lokasi"
placeholder="lokasi acara"
@@ -136,8 +157,14 @@ export default function Event_Edit({
<DateTimePicker
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -174,8 +201,14 @@ export default function Event_Edit({
<DateTimePicker
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
}}
excludeDate={(date) => {
return moment(date).diff(Date.now(), "days") < 0;
@@ -216,8 +249,14 @@ export default function Event_Edit({
<Textarea
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red
}
}}
label="Deskripsi"
placeholder="Deskripsikan acara yang akan di selenggarakan"
@@ -264,7 +303,7 @@ export default function Event_Edit({
onClick={() => onUpdate(router, value, setLoading)}
bg={MainColor.yellow}
color="yellow"
c={"black"}
c={MainColor.darkblue}
>
Update
</Button>

View File

@@ -57,15 +57,15 @@ export default function Event_StatusPage({
key={e.id}
value={e.id}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
color: changeStatus === e.id ? MainColor.darkblue : MainColor.black,
backgroundColor:
changeStatus === e.id ? MainColor.yellow : MainColor.white,
border:
changeStatus === e.id
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
: `1px solid ${MainColor.white}`,
}}
>
{e.name}

View File

@@ -60,8 +60,8 @@ export function Investasi_UiPortofolioNew() {
style={{
transition: "ease 0.5s ",
backgroundColor:
param.id === e.id ? MainColor.yellow : AccentColor.blue,
color: param.id === e.id ? "black" : MainColor.white,
param.id === e.id ? MainColor.yellow : MainColor.white,
color: param.id === e.id ? MainColor.darkblue : MainColor.black,
}}
>
{e.name}

View File

@@ -1,7 +1,7 @@
"use client";
import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -119,9 +119,8 @@ export default function Investasi_ViewDetailDraft({
<Group position="apart" grow>
<Button
radius={50}
bg={MainColor.yellow}
color="yellow"
c={"black"}
style={{ backgroundColor: AccentColor.yellow}}
c={MainColor.darkblue}
onClick={() => setOpenModal(true)}
>
Ajukan Review
@@ -129,8 +128,8 @@ export default function Investasi_ViewDetailDraft({
<Button
radius={50}
color="red"
c={"black"}
style={{ backgroundColor: MainColor.red}}
c={AccentColor.white}
onClick={() => setOpenModalDelete(true)}
>
Hapus
@@ -144,19 +143,20 @@ export default function Investasi_ViewDetailDraft({
close={() => setOpenModal(false)}
title={"Anda yakin ingin mengajukan review ?"}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
<Button style={{ color: AccentColor.white }} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{
transition: "0.5s",
transition: "0.5s", color: "black",
backgroundColor: AccentColor.yellow,
}}
loaderPosition="center"
loading={isLoading}
radius={"xl"}
color={"orange"}
c={MainColor.darkblue}
onClick={() => onChangeStatus()}
>
Simpan
@@ -178,11 +178,12 @@ export default function Investasi_ViewDetailDraft({
<Button
style={{
transition: "0.5s",
backgroundColor: MainColor.red
}}
loaderPosition="center"
loading={isLoadingDelete}
radius={"xl"}
color={"red"}
c={AccentColor.white}
onClick={() => {
onDelete();
}}

View File

@@ -1,6 +1,7 @@
"use client";
import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
@@ -65,9 +66,10 @@ export default function Investasi_ViewDetailReview({
<Button
mb={"xl"}
radius={50}
bg={"orange"}
color="yellow"
c={"black"}
style={{
backgroundColor: MainColor.orange,
}}
c={MainColor.darkblue}
onClick={() => setOpenModal(true)}
>
Batalkan Review
@@ -80,19 +82,21 @@ export default function Investasi_ViewDetailReview({
close={() => setOpenModal(false)}
title={"Anda yakin ingin batalkan review?"}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
<Button style={{ color: AccentColor.white }} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
style={{
transition: "0.5s",
transition: "0.5s", color: "black",
backgroundColor: AccentColor.yellow
}}
loaderPosition="center"
loading={isLoading}
radius={"xl"}
color={"orange"}
c={MainColor.darkblue}
onClick={() => onChangeStatus()}
>
Simpan

View File

@@ -446,7 +446,10 @@ export default function InvestasiCreateNew() {
},
input: {
backgroundColor: MainColor.white,
}
},
dropdown: {
backgroundColor: MainColor.white,
},
}}
withAsterisk
label="Pencarian Investor"
@@ -475,7 +478,10 @@ export default function InvestasiCreateNew() {
},
input: {
backgroundColor: MainColor.white,
}
},
dropdown: {
backgroundColor: MainColor.white,
},
}}
withAsterisk
label="Periode Deviden"
@@ -501,7 +507,10 @@ export default function InvestasiCreateNew() {
},
input: {
backgroundColor: MainColor.white,
}
},
dropdown: {
backgroundColor: MainColor.white,
},
}}
withAsterisk
label="Pembagian Deviden"

View File

@@ -64,12 +64,13 @@ export default function PortofolioInvestasi({
c={"black"}
style={{
transition: "0.5s",
backgroundColor:
activeTab === e.name ? MainColor.yellow : "white",
border:
activeTab === e.name
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
color: activeTab === e.id ? MainColor.darkblue : MainColor.black,
// backgroundColor:
// activeTab === e.name ? MainColor.yellow : AccentColor.white,
// border:
// activeTab === e.name
// ? `1px solid ${AccentColor.yellow}`
// : `1px solid white`,
}}
>
{e.name}

View File

@@ -113,8 +113,14 @@ export default function Vote_Create() {
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
}
}}
label="Judul"
withAsterisk
@@ -131,8 +137,14 @@ export default function Vote_Create() {
<Textarea
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
}
}}
label="Deskripsi"
autosize
@@ -157,8 +169,14 @@ export default function Vote_Create() {
<DatePickerInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
}
}}
label="Jangka Waktu"
placeholder="Masukan jangka waktu voting"
@@ -180,7 +198,7 @@ export default function Vote_Create() {
<Stack spacing={0}>
<Center>
<Text fw={"bold"} fz={"sm"} c={"white"}>
<Text fw={"bold"} fz={"sm"} c={MainColor.white}>
Daftar Pilihan
</Text>
</Center>
@@ -192,8 +210,14 @@ export default function Vote_Create() {
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
}
}}
label={e.name}
withAsterisk

View File

@@ -1,7 +1,7 @@
"use client";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
@@ -124,8 +124,8 @@ function ButtonAction({
<SimpleGrid cols={2}>
<Button
radius={"xl"}
bg={MainColor.yellow}
color="yellow"
style={{ backgroundColor: AccentColor.yellow }}
c={MainColor.darkblue}
onClick={() => {
setOpenModal1(true);
}}
@@ -134,7 +134,8 @@ function ButtonAction({
</Button>
<Button
radius={"xl"}
color="red"
style={{ backgroundColor: MainColor.red }}
c={AccentColor.white}
onClick={() => {
setOpenModal2(true);
}}
@@ -166,8 +167,8 @@ function ButtonAction({
onClick={() => {
onUpdate();
}}
color="yellow"
bg={MainColor.yellow}
c={MainColor.darkblue}
style={{ backgroundColor: AccentColor.yellow }}
>
Ajukan
</Button>
@@ -181,6 +182,7 @@ function ButtonAction({
close={() => setOpenModal2(false)}
buttonKiri={
<Button
c={AccentColor.white}
radius={"xl"}
onClick={() => {
setOpenModal2(false);

View File

@@ -14,6 +14,7 @@ import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_
import { gs_vote_status } from "../../global_state";
import { MODEL_VOTING } from "../../model/interface";
import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
export default function Vote_DetailReject({
dataVote,
@@ -68,16 +69,18 @@ function ButtonAction({ voteId }: { voteId: string }) {
<SimpleGrid cols={2}>
<Button
radius={"xl"}
color="orange"
style={{ backgroundColor: AccentColor.yellow, fontWeight:"bold" }}
c={MainColor.darkblue}
onClick={() => {
setOpenModal1(true);
setOpenModal1(true);
}}
>
Edit Kembali
</Button>{" "}
<Button
radius={"xl"}
color="red"
c={AccentColor.white}
style={{ backgroundColor: MainColor.red, fontWeight:"bold" }}
onClick={() => {
setOpenModal2(true);
}}
@@ -93,6 +96,7 @@ function ButtonAction({ voteId }: { voteId: string }) {
buttonKiri={
<Button
radius={"xl"}
c={AccentColor.white}
onClick={() => {
setOpenModal1(false);
}}
@@ -105,10 +109,11 @@ function ButtonAction({ voteId }: { voteId: string }) {
loaderPosition="center"
loading={isLoading ? true : false}
radius={"xl"}
style={{ backgroundColor: AccentColor.yellow }}
onClick={() => {
onUpdate();
}}
color="orange"
c={MainColor.darkblue}
>
Simpan
</Button>

View File

@@ -15,6 +15,7 @@ import { Vote_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_
import { MODEL_VOTING } from "../../model/interface";
import { voting_checkStatus } from "../../fun";
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
import { AccentColor, MainColor } from "@/app_modules/_global/color";
export default function Vote_DetailReview({
dataVote,
@@ -90,7 +91,8 @@ function ButtonAction({
<>
<Button
radius={"xl"}
color="orange"
style={{ backgroundColor: MainColor.orange }}
c={MainColor.darkblue}
onClick={() => {
setOpenModal(true);
}}
@@ -103,16 +105,17 @@ function ButtonAction({
opened={openModal}
close={() => setOpenModal(false)}
buttonKiri={
<Button radius={"xl"} onClick={() => setOpenModal(false)}>
<Button c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
Batal
</Button>
}
buttonKanan={
<Button
loaderPosition="center"
style={{ backgroundColor: AccentColor.yellow }}
loading={isLoading ? true : false}
radius={"xl"}
color="green"
c={MainColor.darkblue}
onClick={() => {
onUpdate();
console.log(statusId);

View File

@@ -57,7 +57,13 @@ export default function Vote_Edit({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label="Judul"
@@ -84,7 +90,13 @@ export default function Vote_Edit({
<Textarea
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label="Deskripsi"
@@ -117,9 +129,15 @@ export default function Vote_Edit({
<DatePickerInput
styles={{
label: {
color: "white",
},
label: {
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label="Jangka Waktu"
placeholder="Masukan jangka waktu voting"
@@ -161,7 +179,13 @@ export default function Vote_Edit({
<TextInput
styles={{
label: {
color: "white",
color: MainColor.white,
},
input: {
backgroundColor: MainColor.white,
},
required: {
color: MainColor.red,
},
}}
label={"Nama Pilihan"}

View File

@@ -64,15 +64,16 @@ export default function Vote_Status() {
key={e.id}
value={e.id}
fw={"bold"}
c={"black"}
style={{
transition: "0.5s",
color: params.id === e.id ? MainColor.darkblue : MainColor.black,
backgroundColor:
params.id === e.id ? MainColor.yellow : MainColor.white,
border:
params.id === e.id
? `1px solid ${AccentColor.yellow}`
: `1px solid white`,
: `1px solid ${MainColor.white}`,
}}
>
{e.name}