tapquest-ui-yeulamvietnam 2.0.0

package/src/components/Compound/LocationOverviewCard/index.tsx

@@ -0,0 +1,186 @@
+import { ReactNode } from "react";
+import styled from "styled-components";
+import Typography from "../../Typography.styled";
+
+// Styled components
+const CardWrapper = styled.div`
+  width: 100%;
+
+  @media (min-width: 640px) {
+    padding: 0;
+  }
+
+  padding: 16px;
+`;
+
+const CardContainer = styled.div<{ $backgroundColor?: string; $padding?: string }>`
+  width: 100%;
+  background-color: ${({ $backgroundColor }) => $backgroundColor || "white"};
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (min-width: 640px) {
+    padding: ${({ $padding }) => $padding || "16px"};
+  }
+
+  padding: 16px;
+`;
+
+const TitleContainer = styled.div<{ $borderColor?: string; $padding?: string }>`
+  height: 100%;
+  width: 100%;
+  border-left: 2px solid ${({ $borderColor }) => $borderColor || "var(--checkin-text-primary, #000)"};
+  border-style: solid;
+  padding: ${({ $padding }) => $padding || "16px"};
+`;
+
+const DescriptionContainer = styled.div<{ $lineClamp?: number }>`
+  ${({ $lineClamp }) => $lineClamp && `
+    display: -webkit-box;
+    -webkit-line-clamp: ${$lineClamp};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  `}
+`;
+
+const ActionContainer = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+// Types
+export interface LocationOverviewCardProps {
+  backgroundColor?: string;
+  padding?: string;
+  children?: ReactNode;
+}
+
+export interface LocationOverviewTitleProps {
+  text: string;
+  color?: string;
+  borderColor?: string;
+  padding?: string;
+  type?: string;
+}
+
+export interface LocationOverviewDescriptionProps {
+  text: string;
+  color?: string;
+  lineClamp?: number;
+  type?: string;
+}
+
+export interface LocationOverviewActionProps {
+  children: ReactNode;
+}
+
+// Add new interface for simplified data props
+export interface LocationOverviewCardDataProps {
+  title: {
+    text: string;
+    color?: string;
+    borderColor?: string;
+    padding?: string;
+  };
+  description: {
+    text: string;
+    color?: string;
+    lineClamp?: number;
+  };
+  action?: ReactNode;
+  backgroundColor?: string;
+  padding?: string;
+}
+
+// Compound Components
+const LocationOverviewCardRoot = ({ 
+  backgroundColor, 
+  padding, 
+  children 
+}: LocationOverviewCardProps) => {
+  return (
+    <CardWrapper>
+      <CardContainer $backgroundColor={backgroundColor} $padding={padding}>
+        {children}
+      </CardContainer>
+    </CardWrapper>
+  );
+};
+
+const LocationOverviewTitle = ({ 
+  text, 
+  color = "#000", 
+  borderColor,
+  padding,
+}: LocationOverviewTitleProps) => {
+  return (
+    <TitleContainer $borderColor={borderColor} $padding={padding}>
+      <div className="notranslate">
+      <Typography $type={"h2"} $color={color}>
+        {text}
+      </Typography>
+      </div>
+    </TitleContainer>
+  );
+};
+
+const LocationOverviewDescription = ({ 
+  text, 
+  color = "#000", 
+  lineClamp = 3,
+}: LocationOverviewDescriptionProps) => {
+  return (
+    <DescriptionContainer $lineClamp={lineClamp}>
+      <Typography $type={"body-text"} $color={color}>
+        {text}
+      </Typography>
+    </DescriptionContainer>
+  );
+};
+
+const LocationOverviewAction = ({ children }: LocationOverviewActionProps) => {
+  return (
+    <ActionContainer>
+      {children}
+    </ActionContainer>
+  );
+};
+
+// Add new simplified component
+const LocationOverviewCardDefault = ({
+  title,
+  description,
+  action,
+  backgroundColor,
+  padding
+}: LocationOverviewCardDataProps) => {
+  return (
+    <CardWrapper>
+      <CardContainer $backgroundColor={backgroundColor} $padding={padding}>
+        <LocationOverviewTitle
+          text={title.text}
+          color={title.color}
+          borderColor={title.borderColor}
+          padding={title.padding}
+        />
+        <LocationOverviewDescription
+          text={description.text}
+          color={description.color}
+          lineClamp={description.lineClamp}
+        />
+        {action && <LocationOverviewAction>{action}</LocationOverviewAction>}
+      </CardContainer>
+    </CardWrapper>
+  );
+};
+
+// Main Component
+const LocationOverviewCard = Object.assign(LocationOverviewCardRoot, {
+  Title: LocationOverviewTitle,
+  Description: LocationOverviewDescription,
+  Action: LocationOverviewAction,
+  Default: LocationOverviewCardDefault
+});
+
+export default LocationOverviewCard; 

package/src/components/Compound/MemoryCard/index.tsx

@@ -0,0 +1,267 @@
+import { ReactNode } from "react";
+import styled from "styled-components";
+import Image from "../../Image.styled";
+import Typography from "../../Typography.styled";
+
+import { SealCheckIcon, ShieldWarningIcon } from "../../Icons";
+
+// Styled components
+const CardWrapper = styled.div<{ $maxWidth?: string }>`
+  width: 100%;
+  height: 100%;
+`;
+
+const CardContainer = styled.div<{ $borderColor?: string; $backgroundColor?: string }>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${({ $borderColor }) => $borderColor || "var(--checkin-primary, #000)"};
+  background-color: ${({ $backgroundColor }) => $backgroundColor || "var(--checkin-bg, #fff)"};
+`;
+
+const CardContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 8px;
+  padding: 16px;
+  background-color: #FFF7E2;
+`;
+
+const ImageContainer = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 358px;
+  overflow: hidden;
+`;
+
+const StatusOverlay = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BlurOverlay = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(6px);
+`;
+
+const StatusContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const StatusBadge = styled.div<{ $isApproved: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  align-self: flex-start;
+  border-radius: 2px;
+  padding: 2px 4px;
+  background-color: #00000099;
+`;
+
+const TimeContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const CardDescription = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const CardFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const CaptionContainer = styled.div<{ lineClamp?: number }>`
+  ${({ lineClamp }) => lineClamp && `
+    display: -webkit-box;
+    -webkit-line-clamp: ${lineClamp};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  `}
+`;
+
+
+// Types
+export interface MemoryCardProps {
+  borderColor?: string;
+  backgroundColor?: string;
+  children?: ReactNode;
+}
+
+export interface MemoryCardImageProps {
+  src: string;
+  alt?: string;
+  width?: string | number;
+  height?: string | number;
+  objectFit?: "cover" | "contain" | "fill";
+  blur?: boolean;
+}
+
+export interface MemoryCardStatusProps {
+  isApproved: boolean;
+}
+
+export interface MemoryCardTimeProps {
+  time: string;
+  color?: string;
+}
+
+export interface MemoryCardCaptionProps {
+  text: string;
+  color?: string;
+  fontSize?: number;
+  lineClamp?: number;
+}
+
+export interface MemoryCardActionsProps {
+  children: ReactNode;
+}
+
+// Update data props interface
+export interface MemoryCardDataProps {
+  image: {
+    src: string;
+    alt?: string;
+  };
+  isApproved: boolean;
+  time?: string;
+  caption?: string;
+  action?: ReactNode;
+  borderColor?: string;
+  backgroundColor?: string;
+}
+
+// Compound Components
+const MemoryCardRoot = ({ borderColor, backgroundColor, children }: MemoryCardProps) => {
+  return (
+    <CardWrapper>
+      <CardContainer $borderColor={borderColor} $backgroundColor={backgroundColor}>
+        <CardContent>{children}</CardContent>
+      </CardContainer>
+    </CardWrapper>
+  );
+};
+
+const MemoryCardImage = ({ src, alt = "", width = "100%", objectFit = "cover", blur = false }: MemoryCardImageProps) => {
+  return (
+    <ImageContainer>
+      <Image src={src} alt={alt} width={width} objectFit={objectFit} />
+      {blur && (
+        <StatusOverlay>
+          <BlurOverlay />
+        </StatusOverlay>
+      )}
+    </ImageContainer>
+  );
+};
+
+const MemoryCardStatus = ({ isApproved }: MemoryCardStatusProps) => {
+  return (
+    <StatusBadge $isApproved={isApproved}>
+      <Typography $type="body-text" $color="#D9D9D9" $fontWeight="500" $fontSize={12}>
+        {isApproved ? 'Đã duyệt' : 'Đang kiểm duyệt'}
+      </Typography>
+      {isApproved ? <SealCheckIcon /> : <ShieldWarningIcon />}
+    </StatusBadge>
+  );
+};
+
+const MemoryCardTime = ({ time, color = "#0A0101" }: MemoryCardTimeProps) => {
+  return (
+    <TimeContainer>
+      <Typography $type="body-text-2-semibold" $color={color} $fontWeight="500">
+        {time}
+      </Typography>
+    </TimeContainer>
+  );
+};
+
+const MemoryCardCaption = ({ text, color = "#0A0101", fontSize = 14, lineClamp = 2 }: MemoryCardCaptionProps) => {
+  return (
+    <CaptionContainer lineClamp={lineClamp}>
+      <Typography $type="body-text" $color={color} $fontSize={fontSize}>
+        {text}
+      </Typography>
+    </CaptionContainer>
+  );
+};
+
+const MemoryCardActions = ({ children }: MemoryCardActionsProps) => {
+  return <CardFooter>{children}</CardFooter>;
+};
+
+// Update MemoryCardDefault component
+const MemoryCardDefault = ({
+  image,
+  isApproved,
+  time,
+  caption,
+  action,
+  borderColor,
+  backgroundColor,
+}: MemoryCardDataProps) => {
+  return (
+    <MemoryCardRoot borderColor={borderColor} backgroundColor={backgroundColor}>
+      <StatusContainer>
+        <MemoryCardImage
+          src={image.src}
+          alt={image.alt || ""}
+          blur={!isApproved}
+        />
+        <StatusOverlay>
+          {!isApproved && <BlurOverlay />}
+        </StatusOverlay>
+      </StatusContainer>
+      <CardDescription>
+        <CardHeader>
+          <MemoryCardStatus isApproved={isApproved} />
+          {time && <MemoryCardTime time={time} />}
+        </CardHeader>
+        {isApproved && (
+          <MemoryCardCaption text={caption || ''} />
+        )}
+      </CardDescription>
+      {isApproved && action && <CardFooter>{action}</CardFooter>}
+    </MemoryCardRoot>
+  );
+};
+
+// Main Component
+const MemoryCard = Object.assign(MemoryCardRoot, {
+  Image: MemoryCardImage,
+  Status: MemoryCardStatus,
+  Time: MemoryCardTime,
+  Caption: MemoryCardCaption,
+  Actions: MemoryCardActions,
+  Header: CardHeader,
+  Description: CardDescription,
+  Default: MemoryCardDefault,
+});
+
+export default MemoryCard; 

package/src/components/Compound/ProgressStep/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Step from '../../Icons/Step';
+import StepChecked from '../../Icons/StepChecked';
+import StepLine from '../../Icons/StepLine';
+import styled from 'styled-components';
+
+interface ProgressStepProps {
+  current: number;
+  total: number;
+}
+
+const StepContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const GreenLine = styled.div`
+  svg rect {
+    fill: #58CC02;
+  }
+`;
+
+export default function ProgressStep({ current, total }: ProgressStepProps) {
+  // Ensure current is within valid range
+  const validCurrent = Math.max(1, Math.min(current, total));
+
+  return (
+    <StepContainer>
+      {Array.from({ length: total }).map((_, index) => {
+        const stepNumber = index + 1;
+        const isCompleted = stepNumber <= validCurrent;
+        
+        return (
+          <React.Fragment key={stepNumber}>
+            {/* Render the step (either completed or not) */}
+            {isCompleted ? <StepChecked /> : <Step />}
+            
+            {/* Render the connecting line if not the last step */}
+            {stepNumber < total && (
+              isCompleted && stepNumber + 1 <= validCurrent ? (
+                <GreenLine>
+                  <StepLine />
+                </GreenLine>
+              ) : (
+                <StepLine />
+              )
+            )}
+          </React.Fragment>
+        );
+      })}
+    </StepContainer>
+  );
+}

package/src/components/Compound/SponsorByContainer/index.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import Typography from "../../Typography.styled";
+import Image from "../../Image.styled";
+
+// Styled components
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+
+interface SponsorByContainerProps {
+  logo: string;
+}
+
+export default function SponsorByContainer({ logo }: SponsorByContainerProps) {
+  return (
+    <Container>
+      <Typography
+        $type="subheading-3-semibold"
+        $color="var(--checkin-text-primary, #000)"
+        $textTransform="uppercase"
+      >
+        Trạm vật lý được tài trợ bởi
+      </Typography>
+      <Image src={logo} alt="Sponsor by" height={"53px"} />
+    </Container>
+  );
+}

package/src/components/FormItem.styled/index.tsx

@@ -0,0 +1,23 @@
+import { Form as FormAntd } from "antd";
+import styled from "styled-components";
+
+const FormItem = styled(FormAntd.Item)`
+
+    & .ant-form-item-label {
+        padding-bottom: 4px;
+    }
+
+    & .ant-form-item-label > label {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #000;
+    }
+
+    & .ant-form-item-explain-error {
+        text-align: left;
+        color: #A71A1A !important;
+    }
+`
+
+export default FormItem;

package/src/components/Icons/AppbarBg.tsx

@@ -0,0 +1,22 @@
+export const AppbarBg = () => {
+    return (
+        <svg width="626" height="88" viewBox="0 0 626 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g filter="url(#filter0_d_185_24152)">
+                <path fillRule="evenodd" clipRule="evenodd" d="M153 13H13V75H153V13ZM613 13H473V75H613V13Z" fill="white" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M276.148 28.5798C272.703 20.4423 265.837 13 257 13H149C140.163 13 133 20.1634 133 29V59C133 67.8366 140.163 75 149 75H477C485.837 75 493 67.8366 493 59V29C493 20.1634 485.837 13 477 13H369C360.163 13 353.297 20.4423 349.852 28.5798C343.778 42.9311 329.565 53 313 53C296.435 53 282.222 42.9311 276.148 28.5798Z" fill="white" />
+            </g>
+            <defs>
+                <filter id="filter0_d_185_24152" x="0.2" y="0.2" width="625.6" height="87.6" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset />
+                    <feGaussianBlur stdDeviation="6.4" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_185_24152" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_185_24152" result="shape" />
+                </filter>
+            </defs>
+        </svg>
+    )
+}

package/src/components/Icons/ArrowCircle.tsx

@@ -0,0 +1,8 @@
+export default function ArrowCircle() {
+    return (
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="28" height="28" rx="14" fill="#A71A1A" />
+            <path d="M6 14H19.5M19.5 14L14.5 9M19.5 14L14.5 19" stroke="white" strokeWidth="1.5" />
+        </svg>
+    )
+}

package/src/components/Icons/ArrowDown.tsx

@@ -0,0 +1,15 @@
+export default function ArrowDown() {
+    return (
+        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_6301_24410)">
+                <path d="M12.5 19L12.5 5" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M5.5 12L12.5 19L19.5 12" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_6301_24410">
+                    <rect width="24" height="24" fill="white" transform="translate(0.5)" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}

package/src/components/Icons/Camera.tsx

@@ -0,0 +1,17 @@
+export default function Camera() {
+    return (
+        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_2962_242)">
+                <path opacity="0.16" fillRule="evenodd" clipRule="evenodd" d="M21.5 6H3.5V16C3.5 17.1046 4.39543 18 5.5 18H19.5C20.6046 18 21.5 17.1046 21.5 16V6ZM12.5 15C14.1569 15 15.5 13.6569 15.5 12C15.5 10.3431 14.1569 9 12.5 9C10.8431 9 9.5 10.3431 9.5 12C9.5 13.6569 10.8431 15 12.5 15Z" fill="currentColor" />
+                <path d="M3.5 5H21.5V17C21.5 18.1046 20.6046 19 19.5 19H5.5C4.39543 19 3.5 18.1046 3.5 17V5Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
+                <circle cx="12.5" cy="12" r="3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M17.5 2L19.5 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_2962_242">
+                    <rect width="24" height="24" fill="currentColor" transform="translate(0.5)" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}

package/src/components/Icons/Check.tsx

@@ -0,0 +1,7 @@
+export default function Check() {
+    return (
+        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20 7.63037L10 17.6304L5 12.6304" stroke="#58A700" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+    )
+}

package/src/components/Icons/ChevronLeft.tsx

@@ -0,0 +1,7 @@
+export default function ChevronLeft() {
+    return (
+        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.0302 19.4693C16.0999 19.539 16.1552 19.6217 16.1929 19.7128C16.2306 19.8038 16.25 19.9014 16.25 19.9999C16.25 20.0985 16.2306 20.1961 16.1929 20.2871C16.1552 20.3781 16.0999 20.4609 16.0302 20.5306C15.9606 20.6002 15.8778 20.6555 15.7868 20.6932C15.6957 20.7309 15.5982 20.7503 15.4996 20.7503C15.4011 20.7503 15.3035 20.7309 15.2124 20.6932C15.1214 20.6555 15.0387 20.6002 14.969 20.5306L7.46899 13.0306C7.39926 12.9609 7.34394 12.8782 7.30619 12.7871C7.26845 12.6961 7.24902 12.5985 7.24902 12.4999C7.24902 12.4014 7.26845 12.3038 7.30619 12.2127C7.34394 12.1217 7.39926 12.039 7.46899 11.9693L14.969 4.4693C15.1097 4.32857 15.3006 4.24951 15.4996 4.24951C15.6986 4.24951 15.8895 4.32857 16.0302 4.4693C16.171 4.61003 16.25 4.80091 16.25 4.99993C16.25 5.19895 16.171 5.38982 16.0302 5.53055L9.05993 12.4999L16.0302 19.4693Z" fill="#A71A1A" />
+        </svg>
+    )
+}

package/src/components/Icons/ChevronRight.tsx

@@ -0,0 +1,16 @@
+export default function ChevronRight() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clipPath="url(#clip0_3885_22877)">
+                <path d="M10 17L15 12" stroke="#292929" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                <path d="M15 12L10 7" stroke="#292929" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </g>
+            <defs>
+                <clipPath id="clip0_3885_22877">
+                    <rect width="24" height="24" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+
+    )
+}

package/src/components/Icons/CircleAlert.tsx

@@ -0,0 +1,9 @@
+export default function CircleAlert() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M21 12C21 7.03125 16.9688 3 12 3C7.03125 3 3 7.03125 3 12C3 16.9688 7.03125 21 12 21C16.9688 21 21 16.9688 21 12Z" stroke="white" strokeWidth="2" strokeMiterlimit="10" />
+            <path d="M11.7307 7.78322L11.9998 13.4996L12.2684 7.78322C12.2701 7.74667 12.2643 7.71017 12.2513 7.67595C12.2384 7.64173 12.2186 7.6105 12.1932 7.58418C12.1678 7.55785 12.1373 7.53699 12.1036 7.52285C12.0698 7.50872 12.0336 7.50161 11.997 7.50197V7.50197C11.9609 7.50231 11.9251 7.50993 11.892 7.52437C11.8589 7.53882 11.829 7.55979 11.8041 7.58604C11.7793 7.61229 11.76 7.64328 11.7474 7.67716C11.7348 7.71104 11.7291 7.74711 11.7307 7.78322V7.78322Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M12 17.2461C11.8146 17.2461 11.6333 17.1911 11.4792 17.0881C11.325 16.9851 11.2048 16.8387 11.1339 16.6674C11.0629 16.4961 11.0443 16.3076 11.0805 16.1257C11.1167 15.9438 11.206 15.7768 11.3371 15.6457C11.4682 15.5146 11.6352 15.4253 11.8171 15.3891C11.999 15.3529 12.1875 15.3715 12.3588 15.4425C12.5301 15.5134 12.6765 15.6336 12.7795 15.7877C12.8825 15.9419 12.9375 16.1232 12.9375 16.3086C12.9375 16.5572 12.8387 16.7957 12.6629 16.9715C12.4871 17.1473 12.2486 17.2461 12 17.2461Z" fill="white" />
+        </svg>
+    );
+}

package/src/components/Icons/CircleArrow.tsx

@@ -0,0 +1,8 @@
+export default function CircleArrow() {
+    return (
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="28" height="28" rx="14" fill="#A71A1A" />
+            <path d="M6 14H19.5M19.5 14L14.5 9M19.5 14L14.5 19" stroke="white" strokeWidth="1.5" />
+        </svg>
+    )
+}