Component

Add:
- Badge
- Container

Voting
Add:
- screens/Voting

Fix:
- (tabs)/ index, contribution, status

# No Issue

screens/Voting/BoxPublishSection.tsx

@@ -0,0 +1,55 @@
+import {
+  BoxWithHeaderSection,
+  AvatarUsernameAndOtherComponent,
+  Spacing,
+  StackCustom,
+  TextCustom,
+  BadgeCustom,
+  Grid,
+  CircleContainer,
+} from "@/components";
+import dayjs from "dayjs";
+
+export default function Voting_BoxPublishSection({
+  bottomComponent,
+}: {
+  bottomComponent?: React.ReactNode;
+}) {
+  return (
+    <>
+      <BoxWithHeaderSection>
+        <AvatarUsernameAndOtherComponent avatarHref="/profile/1" />
+        <Spacing />
+        <StackCustom>
+          <TextCustom align="center" bold truncate size="large">
+            Voting Title Here
+          </TextCustom>
+
+          <BadgeCustom
+            style={{ width: "70%", alignSelf: "center" }}
+            variant="light"
+          >
+            {dayjs().format("DD/MM/YYYY")} -{" "}
+            {dayjs().add(1, "day").format("DD/MM/YYYY")}
+          </BadgeCustom>
+
+          <Grid>
+            <Grid.Col span={3} style={{ alignItems: "center" }}>
+              <CircleContainer value={"10"} />
+            </Grid.Col>
+            <Grid.Col span={3} style={{ alignItems: "center" }}>
+              <CircleContainer value={"9"} />
+            </Grid.Col>
+            <Grid.Col span={3} style={{ alignItems: "center" }}>
+              <CircleContainer value={"10"} />
+            </Grid.Col>
+            <Grid.Col span={3} style={{ alignItems: "center" }}>
+              <CircleContainer value={"9"} />
+            </Grid.Col>
+          </Grid>
+          {bottomComponent}
+        </StackCustom>
+      </BoxWithHeaderSection>
+    </>
+  );
+}