feat: add ranking list component

src/components/RankingList/RankingList.component.tsx

@@ -0,0 +1,14 @@
+import * as S from './RankingList.styles'
+import { FC, ReactElement } from 'react'
+
+export interface RankingListProps {
+	children: ReactElement | ReactElement[]
+}
+
+export const RankingList: FC<RankingListProps> = ({ children }): ReactElement => {
+	return (
+		<S.RankingListContainer>
+			<S.RankingList>{children}</S.RankingList>
+		</S.RankingListContainer>
+	)
+}

src/components/RankingList/RankingList.styles.ts

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const RankingListContainer = styled.div`
+  width: 100%;
+  background-image: linear-gradient(to right, #3b82f6, #86efac, #9333ea);
+  padding: 6px;
+  border-radius: 2.6rem;
+`
+
+export const RankingList = styled.ol`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+  background-color: #1e1e1e;
+  border-radius: 2rem;
+`

src/components/RankingList/index.ts

@@ -0,0 +1,2 @@
+export * from './RankingList.component';
+export * as RankingListStyles from './RankingList.styles'