feat(HTD-8): adds badge (#9)

- fix styles

Author: nephlin7

src/app/page.tsx

@@ -1,3 +1,6 @@
+import { Sparkle } from '@phosphor-icons/react/dist/ssr';
+
+import { Badge } from '@/components/elements/badge';
 import { Container } from '@/components/elements/container';
 import { Heading } from '@/components/elements/heading';
 import ShowCase from '@/components/elements/showcase';
@@ -75,6 +78,12 @@ export default async function Home() {
           Label M
         </Text>
       </ShowCase>
+      <ShowCase title="Badge">
+        <Badge icon={Sparkle}>Intercept</Badge>
+        <Badge icon={Sparkle} variant="secondary" additionalText="Edit">
+          Pro Feature
+        </Badge>
+      </ShowCase>
       <ShowCase title="Theme toggle">
         <ThemeToggle />
       </ShowCase>

src/components/elements/badge/badge.styles.ts

@@ -0,0 +1,57 @@
+'use client';
+
+import type { BadgeProps } from './badge.types';
+
+import { css, styled } from '@/styles';
+
+export const BadgeWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  gap: 16px;
+`;
+
+export const AdditionalText = styled.span`
+  color: ${({ theme }) => theme.colors.lightGrey};
+  font-size: ${({ theme }) => theme.fontSizes.label.l};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  letter-spacing: ${({ theme }) => theme.letterSpacing.label};
+  text-transform: uppercase;
+`;
+
+export const StyledBadge = styled.span<BadgeProps>`
+  display: flex;
+  align-items: center;
+
+  gap: 6px;
+
+  font-size: ${({ theme }) => theme.fontSizes.label.m};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+  line-height: ${({ theme }) => theme.lineHeight.label};
+  letter-spacing: ${({ theme }) => theme.letterSpacing.label};
+  text-transform: uppercase;
+
+  ${({ variant }) => {
+    switch (variant) {
+      case 'primary':
+        return css`
+          border-radius: 16px;
+          padding: 6px 10px;
+          color: ${({ theme }) => theme.colors.text.lightGrey};
+          background-color: ${({ theme }) => theme.colors.mediumGrey};
+          box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.borderGradient};
+        `;
+
+      case 'secondary':
+        return css`
+          border-radius: 24px;
+          padding: 8px 12px;
+          color: ${({ theme }) => theme.colors.text.alwayLightGrey};
+          background: ${({ theme }) => theme.colors.blueGradient};
+          box-shadow:
+            0px 1.66px 0.83px 0px rgba(201, 212, 251, 0.1) inset,
+            0px -0.83px 0.83px 0px rgba(16, 46, 151, 0.1) inset;
+        `;
+    }
+  }}
+`;

src/components/elements/badge/badge.types.ts

@@ -0,0 +1,8 @@
+import type { Icon, IconWeight } from '@phosphor-icons/react';
+
+export interface BadgeProps {
+  variant?: 'primary' | 'secondary';
+  icon?: Icon;
+  iconWeight?: IconWeight;
+  additionalText?: string;
+}

src/components/elements/badge/index.tsx

@@ -0,0 +1,22 @@
+import { AdditionalText, BadgeWrapper, StyledBadge } from './badge.styles';
+import type { BadgeProps } from './badge.types';
+
+export const Badge = ({
+  children,
+  variant = 'primary',
+  additionalText,
+  icon: Icon,
+  iconWeight = 'fill',
+}: Component<BadgeProps>) => {
+  const hasAdditionalText = variant === 'secondary' && additionalText;
+
+  return (
+    <BadgeWrapper>
+      {hasAdditionalText && <AdditionalText>{additionalText}</AdditionalText>}
+      <StyledBadge variant={variant}>
+        {Icon && <Icon size={16} weight={iconWeight} />}
+        <h3>{children}</h3>
+      </StyledBadge>
+    </BadgeWrapper>
+  );
+};

src/styles/index.ts

@@ -82,6 +82,21 @@ export const theme = {
       m: '1rem', // 16px / 16px = 1rem
       s: '0.875rem', // 14px / 16px = 0.875
     },
+    button: {
+      default: '1.125rem', // 18px / 16px = 1.125.5rem
+      small: '1rem', // 16px / 16px = 1rem
+    },
+    label: {
+      xl: '1.5rem', // 24px / 16px = 1.5rem
+      l: '1rem', // 16px / 16px = 1rem
+      m: '0.875rem', // 14px / 16px = 0.875
+    },
+  },
+  lineHeight: {
+    label: '110%',
+  },
+  letterSpacing: {
+    label: '0.06em',
   },
   space: {
     xs: '4px',
@@ -109,7 +124,7 @@ export const GlobalStyles = createGlobalStyle`
       --orange-gradient: linear-gradient(to bottom, #D93815, #F65430);
       --blue-gradient: linear-gradient(to bottom, #4064E2, #3556CA);
       --dark-gradient: linear-gradient(to bottom, #1E2028, #30333E 70%);
-      --border-gradient: linear-gradient(to bottom, rgba(103, 108, 129, 0.2), rgba(93, 97, 112, 0.04));
+      --border-gradient: rgba(255, 255, 255, 0.2);
       --text-light-grey: #E6E8F2;
       --text-dark-grey: #C5C6CA;
       --text-cinnabar-red: #EC502D;
@@ -133,7 +148,7 @@ export const GlobalStyles = createGlobalStyle`
       --orange-gradient: linear-gradient(to bottom, #F65430, #D93815);
       --blue-gradient: linear-gradient(to bottom, #3556CA, #4064E2);
       --dark-gradient: linear-gradient(to bottom, #30333E, #1E2028 70%);
-      --border-gradient: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
+      --border-gradient: transparent;
       --text-light-grey: #16181E;
       --text-dark-grey: #595D68;
       --text-cinnabar-red: #D93E1C;