Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add home UI #34

Merged
merged 5 commits into from
Nov 18, 2024
Merged

feat: add home UI #34

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
030c7bc
feat: add home UI
limsohee1002 Nov 15, 2024
3073ffc
feat: add 404
limsohee1002 Nov 15, 2024
d0c0d3b
fix: style
limsohee1002 Nov 15, 2024
96befd4
fix: typo
limsohee1002 Nov 15, 2024
1ec546a
Merge branch 'main' into feat/home
limsohee1002 Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 217 additions & 0 deletions src/components/Icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,103 @@ import React, { FC } from 'react'

import cn from 'classnames'

export const ThickX: FC<{ className?: string }> = ({ className }) => {
return (
<svg
className={className}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.24264 2.48528C5.92893 1.17157 3.79899 1.17157 2.48528 2.48528C1.17157 3.79899 1.17157 5.92893 2.48528 7.24264L6.0533 10.8107C6.71016 11.4675 6.71016 12.5325 6.0533 13.1893L2.48528 16.7574C1.17157 18.0711 1.17157 20.201 2.48528 21.5147C3.79899 22.8284 5.92893 22.8284 7.24264 21.5147L10.8107 17.9467C11.4675 17.2898 12.5325 17.2898 13.1893 17.9467L16.7574 21.5147C18.0711 22.8284 20.201 22.8284 21.5147 21.5147C22.8284 20.201 22.8284 18.0711 21.5147 16.7574L17.9467 13.1893C17.2898 12.5325 17.2898 11.4675 17.9467 10.8107L21.5147 7.24264C22.8284 5.92893 22.8284 3.79899 21.5147 2.48528C20.201 1.17157 18.0711 1.17157 16.7574 2.48528L13.1893 6.0533C12.5325 6.71016 11.4675 6.71016 10.8107 6.0533L7.24264 2.48528Z"
fill="#4981FF"
/>
</svg>
)
}
limsohee1002 marked this conversation as resolved.
Show resolved Hide resolved

export const Globe: FC<{
className?: string
color: 'orange-vibrant' | 'brown-vibrant' | 'pink-vibrant' | 'neutral-1'
}> = ({ className, color }) => {
return (
<svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.55351 8.50001C4.65351 10.5533 5.34684 12.6467 6.55351 14.5067C3.72684 13.88 1.57352 11.46 1.35352 8.50001H4.55351ZM6.55351 1.49334C3.72684 2.12 1.57352 4.54001 1.35352 7.50001H4.55351C4.65351 5.44668 5.34684 3.35334 6.55351 1.49334ZM8.13352 1.33334H7.86684L7.66685 1.62001C6.40018 3.42001 5.66017 5.48668 5.55351 7.50001H10.4469C10.3402 5.48668 9.60018 3.42001 8.33352 1.62001L8.13352 1.33334ZM5.55351 8.50001C5.66017 10.5133 6.40018 12.58 7.66685 14.38L7.86684 14.6667H8.13352L8.33352 14.38C9.60018 12.58 10.3402 10.5133 10.4469 8.50001H5.55351ZM11.4469 8.50001C11.3469 10.5533 10.6535 12.6467 9.44686 14.5067C12.2735 13.88 14.4269 11.46 14.6469 8.50001H11.4469ZM14.6469 7.50001C14.4269 4.54001 12.2735 2.12 9.44686 1.49334C10.6535 3.35334 11.3469 5.44668 11.4469 7.50001H14.6469Z"
className={cn({
'fill-light-orange-vibrant dark:fill-dark-orange-vibrant': color === 'orange-vibrant',
'fill-light-brown-vibrant dark:fill-dark-brown-vibrant': color === 'brown-vibrant',
'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
})}
/>
</svg>
)
}

export const Hexagon: FC<{ className?: string; color?: 'green' }> = ({ className, color = 'green' }) => {
return (
<svg
className={className}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.59449 5.16974C3.61343 5.71038 3 6.76995 3 7.92393V16.0761C3 17.23 3.61343 18.2896 4.59449 18.8303L10.5945 22.1367C11.4735 22.6211 12.5265 22.6211 13.4055 22.1367L19.4055 18.8303C20.3866 18.2896 21 17.23 21 16.0761V7.92393C21 6.76996 20.3866 5.71038 19.4055 5.16974L13.4055 1.86331C12.5265 1.3789 11.4735 1.3789 10.5945 1.86331L4.59449 5.16974ZM6.18914 11.3118C5.93708 11.7357 5.93694 12.2644 6.18878 12.6884L8.63197 16.8015C8.8732 17.2076 9.3093 17.4561 9.77988 17.4556L14.2223 17.4507C14.6917 17.4502 15.1264 17.202 15.3671 16.7969L17.811 12.685C18.063 12.2611 18.063 11.7324 17.811 11.3084L15.3681 7.19817C15.1268 6.79223 14.6908 6.54387 14.2204 6.54439L9.77747 6.54929C9.30819 6.5498 8.87363 6.7979 8.63286 7.20276L6.18914 11.3118Z"
className={cn({
'fill-green-base dark:fill-green-vibrant': color === 'green',
})}
/>
</svg>
)
}

export const BookOpen: FC<{ className?: string; color?: 'accent-1' }> = ({ className, color = 'accent-1' }) => {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 3.5471V12.2204C14 12.4404 13.7867 12.5938 13.5667 12.5338C11.9774 12.0812 10.382 12.0791 8.79134 12.8725C8.65734 12.9391 8.49935 12.8485 8.49935 12.6985V3.90249C8.49935 3.85782 8.51339 3.81316 8.53939 3.77716C8.95472 3.20716 9.59736 2.81046 10.346 2.71979C11.554 2.57312 12.7154 2.71984 13.8094 3.24184C13.9261 3.29718 14 3.41843 14 3.5471ZM5.65332 2.72044C4.44532 2.57377 3.28394 2.72049 2.18994 3.24249C2.07394 3.29783 2 3.41917 2 3.54783V12.2212C2 12.4412 2.21327 12.5945 2.43327 12.5345C4.0226 12.0818 5.61799 12.0798 7.20866 12.8731C7.34266 12.9398 7.50065 12.8491 7.50065 12.6991V3.90314C7.50065 3.85847 7.48661 3.81381 7.46061 3.77781C7.04461 3.20781 6.40265 2.81111 5.65332 2.72044Z"
className={cn({
'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
})}
/>
</svg>
)
}

export const ArrowRight: FC<{
className?: string
color?: 'accent-1'
}> = ({ className, color = 'accent-1' }) => {
return (
<svg className={className} viewBox="0 0 20 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.33325 14.0003C3.33325 13.5401 3.70635 13.167 4.16659 13.167L13.8214 13.167L9.41066 8.75625C9.08523 8.43081 9.08523 7.90317 9.41066 7.57774C9.7361 7.2523 10.2637 7.2523 10.5892 7.57774L16.4225 13.4111C16.7479 13.7365 16.7479 14.2641 16.4225 14.5896L10.5892 20.4229C10.2637 20.7484 9.7361 20.7484 9.41066 20.4229C9.08523 20.0975 9.08523 19.5698 9.41066 19.2444L13.8214 14.8337L4.16659 14.8337C3.70635 14.8337 3.33325 14.4606 3.33325 14.0003Z"
className={cn({
'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
})}
/>
</svg>
)
}

export const MiniUnicon: FC<{
className?: string
color?: 'accent-1' | 'neutral-1'
Expand Down Expand Up @@ -79,6 +176,54 @@ export const MiniUnicon: FC<{
)
}

export const Emblem1: FC<{
className?: string
color?: 'accent-1'
}> = ({ className, color = 'accent-1' }) => {
return (
<svg
className={className}
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M12.125 1.125C13.2848 1.125 14.225 2.0652 14.225 3.225C14.225 3.8049 14.6951 4.275 15.275 4.275C16.4348 4.275 17.375 5.2152 17.375 6.375C17.375 7.5348 16.4348 8.475 15.275 8.475H14.75C14.4601 8.475 14.225 8.71005 14.225 9C14.225 9.28995 14.4601 9.525 14.75 9.525H15.275C16.4348 9.525 17.375 10.4652 17.375 11.625C17.375 12.7848 16.4348 13.725 15.275 13.725C14.6951 13.725 14.225 14.1951 14.225 14.775C14.225 15.9348 13.2848 16.875 12.125 16.875C10.9652 16.875 10.025 15.9348 10.025 14.775V14.25C10.025 13.9601 9.78995 13.725 9.5 13.725C9.21005 13.725 8.975 13.9601 8.975 14.25V14.775C8.975 15.9348 8.0348 16.875 6.875 16.875C5.7152 16.875 4.775 15.9348 4.775 14.775C4.775 14.1951 4.3049 13.725 3.725 13.725C2.5652 13.725 1.625 12.7848 1.625 11.625C1.625 10.4652 2.5652 9.525 3.725 9.525H4.25C4.53995 9.525 4.775 9.28995 4.775 9C4.775 8.71005 4.53995 8.475 4.25 8.475H3.725C2.5652 8.475 1.625 7.5348 1.625 6.375C1.625 5.2152 2.5652 4.275 3.725 4.275C4.3049 4.275 4.775 3.8049 4.775 3.225C4.775 2.0652 5.7152 1.125 6.875 1.125C8.0348 1.125 8.975 2.0652 8.975 3.225V3.75C8.975 4.03995 9.21005 4.275 9.5 4.275C9.78995 4.275 10.025 4.03995 10.025 3.75V3.225C10.025 2.0652 10.9652 1.125 12.125 1.125ZM8.45 6.9C7.8701 6.9 7.4 7.3701 7.4 7.95V10.05C7.4 10.6299 7.8701 11.1 8.45 11.1H10.55C11.1299 11.1 11.6 10.6299 11.6 10.05V7.95C11.6 7.3701 11.1299 6.9 10.55 6.9H8.45Z"
className={cn({
'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
})}
/>
</svg>
)
}

export const Emblem2: FC<{
className?: string
color?: 'accent-1'
}> = ({ className, color = 'accent-1' }) => {
return (
<svg
className={className}
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.87864 2.71795C9.11793 2.24057 9.80377 2.23916 10.0451 2.71554L10.9327 4.46794C11.1115 4.82104 11.5648 4.93394 11.8905 4.70654L15.219 2.38261C15.7725 1.99623 16.4794 2.59873 16.1781 3.1999L13.3948 8.7524C13.3034 8.93474 13.3038 9.14914 13.396 9.3311L16.1703 14.8083C16.4741 15.408 15.7702 16.0134 15.2151 15.6298L11.9224 13.3548C11.5958 13.129 11.1433 13.2439 10.966 13.5976L10.1216 15.2821C9.88231 15.7594 9.19648 15.7608 8.95518 15.2845L8.06756 13.5321C7.88871 13.179 7.43544 13.0661 7.10972 13.2935L3.7812 15.6174C3.22779 16.0038 2.5208 15.4013 2.82216 14.8001L5.60549 9.2476C5.69689 9.06526 5.69644 8.85086 5.60427 8.6689L2.82995 3.19167C2.52619 2.59197 3.23007 1.98661 3.78517 2.37015L7.07782 4.64523C7.40449 4.87095 7.85698 4.75607 8.03425 4.40242L8.87864 2.71795Z"
className={cn({
'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
})}
/>
</svg>
)
}

export const Github: FC<{
className?: string
color?: 'neutral-2'
Expand Down Expand Up @@ -170,6 +315,7 @@ export const Menu: FC<{
</svg>
)
}

export const Moon: FC<{
className?: string
color?: 'neutral-2'
Expand All @@ -186,6 +332,77 @@ export const Moon: FC<{
)
}

export const Npm: FC<{ className?: string }> = ({ className }) => {
return (
<svg
className={className}
width="256px"
height="256px"
viewBox="0 0 256 256"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
>
<g>
<polygon fill="#C12127" points="0 256 0 0 256 0 256 256"></polygon>
<polygon fill="#FFFFFF" points="48 48 208 48 208 208 176 208 176 80 128 80 128 208 48 208"></polygon>
</g>
</svg>
)
}
Comment on lines +335 to +352
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Make Npm component consistent with other icons

The Npm component breaks the established pattern by using hardcoded colors. Consider making it consistent with other icons by adding theme support.

-export const Npm: FC<{ className?: string }> = ({ className }) => {
+export const Npm: FC<{
+  className?: string
+  color?: 'accent-1' | 'neutral-2'
+}> = ({ className, color = 'accent-1' }) => {
   return (
     <svg
       className={className}
       width="256px"
       height="256px"
       viewBox="0 0 256 256"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMidYMid"
     >
       <g>
-        <polygon fill="#C12127" points="0 256 0 0 256 0 256 256"></polygon>
-        <polygon fill="#FFFFFF" points="48 48 208 48 208 208 176 208 176 80 128 80 128 208 48 208"></polygon>
+        <polygon className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
+        })} points="0 256 0 0 256 0 256 256"></polygon>
+        <polygon fill="currentColor" points="48 48 208 48 208 208 176 208 176 80 128 80 128 208 48 208"></polygon>
       </g>
     </svg>
   )
 }

Committable suggestion skipped: line range outside the PR's diff.


export const HelpCircle: FC<{
className?: string
color?: 'orange-vibrant' | 'blue-vibrant' | 'green-base' | 'pink-vibrant'
}> = ({ className, color = 'orange-vibrant' }) => {
return (
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM12.02 17.5C11.468 17.5 11.0149 17.052 11.0149 16.5C11.0149 15.948 11.458 15.5 12.01 15.5H12.02C12.573 15.5 13.02 15.948 13.02 16.5C13.02 17.052 12.572 17.5 12.02 17.5ZM13.603 12.5281C12.872 13.0181 12.7359 13.291 12.7109 13.363C12.6059 13.676 12.314 13.874 12 13.874C11.921 13.874 11.841 13.862 11.762 13.835C11.369 13.703 11.1581 13.278 11.2891 12.885C11.4701 12.345 11.9391 11.836 12.7671 11.281C13.7881 10.597 13.657 9.84707 13.614 9.60107C13.501 8.94707 12.95 8.38988 12.303 8.27588C11.811 8.18588 11.3301 8.31488 10.9541 8.62988C10.5761 8.94688 10.3589 9.41391 10.3589 9.90991C10.3589 10.3239 10.0229 10.6599 9.60889 10.6599C9.19489 10.6599 8.85889 10.3239 8.85889 9.90991C8.85889 8.96891 9.27099 8.08396 9.98999 7.48096C10.702 6.88496 11.639 6.63605 12.564 6.80005C13.831 7.02405 14.8701 8.07097 15.0911 9.34497C15.3111 10.607 14.782 11.7381 13.603 12.5281Z"
className={cn({
'fill-light-orange-vibrant dark:fill-dark-orange-vibrant': color === 'orange-vibrant',
'fill-light-blue-vibrant dark:fill-dark-blue-vibrant': color === 'blue-vibrant',
'fill-light-green-base dark:fill-dark-green-base': color === 'green-base',
'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
})}
/>
</svg>
)
}

export const Chat: FC<{
className?: string
color?: 'brown-vibrant'
}> = ({ className, color = 'brown-vibrant' }) => {
return (
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.8789 20.394C21.1189 20.594 20.9789 20.994 20.6689 20.994C19.6389 21.034 18.0591 20.894 17.0891 19.864C16.2991 20.144 15.419 20.2841 14.499 20.2841C12.481 20.2841 10.686 19.607 9.49902 18.368C9.31002 18.17 9.35802 17.785 9.79102 17.819C10.024 17.835 10.259 17.844 10.499 17.844C15.119 17.844 18.614 15.143 19.353 11.235C19.403 10.973 19.7291 10.886 19.8931 11.097C20.5931 12.003 20.998 13.1481 20.998 14.5031C20.998 16.0331 20.4679 17.314 19.5879 18.264C19.6989 18.964 20.0889 19.754 20.8789 20.394ZM17.998 9.67102C17.998 9.62402 17.992 9.58103 17.991 9.53503C17.917 5.44903 14.594 3 10.499 3C6.35802 3 3 5.50202 3 9.67102C3 11.439 3.608 12.915 4.625 14.015C4.5 14.816 4.05009 15.733 3.14209 16.467C2.86709 16.7 3.02503 17.159 3.38403 17.167C4.56703 17.209 6.39203 17.05 7.50903 15.858C7.73703 15.937 7.97094 16.006 8.21094 16.066C8.93194 16.247 9.69998 16.3409 10.501 16.3409C14.64 16.3419 17.998 13.84 17.998 9.67102Z"
className={cn({
'fill-light-brown-vibrant dark:fill-dark-brown-vibrant': color === 'brown-vibrant',
})}
/>
</svg>
)
}

export const Envelope: FC<{
className?: string
color?: 'pink-vibrant' | 'neutral-2'
}> = ({ className, color = 'pink-vibrant' }) => {
return (
<svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18 5H6C4 5 3 6 3 8V17C3 19 4 20 6 20H18C20 20 21 19 21 17V8C21 6 20 5 18 5ZM17.9409 9.606L13.0291 13.178C12.7211 13.402 12.36 13.514 12 13.514C11.64 13.514 11.2779 13.402 10.9709 13.179L6.05908 9.606C5.72408 9.363 5.65004 8.893 5.89404 8.558C6.13704 8.224 6.60389 8.14801 6.94189 8.39301L11.854 11.965C11.942 12.028 12.059 12.029 12.147 11.965L17.0591 8.39301C17.3961 8.14801 17.8639 8.224 18.1069 8.558C18.3509 8.894 18.2759 9.363 17.9409 9.606Z"
className={cn({
'fill-light-pink-vibrant dark:fill-dark-pink-vibrant': color === 'pink-vibrant',
'fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
})}
/>
</svg>
)
}

export type Icon = 'sun' | 'moon'

export const IconMap: FC<{
Expand Down
89 changes: 89 additions & 0 deletions src/components/NewsletterForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React, { useState } from 'react'
import { Envelope } from '../../components/Icons'
import cn from 'classnames'

interface NewsletterFormProps {
headerText: string
headerTextClass?: string
globeColorClass: 'pink-vibrant' | 'neutral-2'
inputClass?: string
}

const NewsletterForm: React.FC<NewsletterFormProps> = ({
headerText,
headerTextClass,
inputClass,
globeColorClass,
}) => {
const [emailInputValue, setEmailInputValue] = useState('')
const [isSubscribed, setIsSubscribed] = useState(false)
const [error, setError] = useState('')

const handleSubscribe = async (e: React.FormEvent) => {
e.preventDefault()

if (!emailInputValue) {
setError('Please provide a valid email address.')
return
}

try {
// Replace '/some-api' with the actual API endpoint
const response = await fetch('/some-api', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ emailInputValue }),
})

if (response.ok) {
setIsSubscribed(true)
setError('')
} else {
const data = await response.json()
setError(data.message || 'Subscription failed. Please try again.')
}
} catch (err) {
setError('An error occurred. Please try again.')
}
}
limsohee1002 marked this conversation as resolved.
Show resolved Hide resolved

return (
<>
<h3 className={cn('heading-3', headerTextClass)}>{headerText}</h3>
<form onSubmit={handleSubscribe}>
<div className="flex flex-col sm:flex-row">
<div className="relative w-full">
<input
className={cn('button-label-2 w-full flex-grow rounded-large p-3 pl-[2.7rem]', inputClass)}
aria-label="Enter Email"
type="email"
placeholder="Enter Email"
value={emailInputValue}
onChange={(e) => setEmailInputValue(e.target.value)}
/>
<Envelope className="absolute left-3 top-[50%] h-6 w-6 translate-y-[-50%]" color={globeColorClass} />
</div>
<button className="group mt-2 flex items-center justify-center rounded-large bg-light-pink-vibrant p-3 w-32 transition hover:bg-dark-accent-2 dark:bg-dark-pink-vibrant hover:dark:bg-light-accent-2 sm:ml-2 sm:mt-0">
<span className="button-label-1 text-white transition group-hover:text-dark-accent-1 group-hover:dark:text-light-accent-1">
Submit
</span>
</button>
</div>
<div>
{!isSubscribed && error && (
<p className="body-3 mt-2 text-light-status-critical-1 dark:text-dark-status-critical-1">{error}</p>
)}
{isSubscribed && (
<p className="body-3 mt-2 text-light-status-success-1 dark:text-dark-status-success-1">
Successfully subscribed
</p>
)}
</div>
</form>
</>
)
}

export default NewsletterForm
8 changes: 8 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,11 @@
.default-grid {
@apply grid grid-cols-4 gap-gap-large sm:grid-cols-8;
}

.content-page-padding {
@apply p-6 pb-10 sm:p-12 sm:pt-6 md:px-10 md:pb-12;
}

.divider {
@apply border-t border-light-surface-3 dark:border-dark-surface-3;
}
Loading
Loading