-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
💄 style(colors): color sychnorize with words and cards
- Loading branch information
1 parent
bd0f3b1
commit 1656689
Showing
12 changed files
with
188 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| "use client"; | ||
|
|
||
| import Container from "@/components/Common/Container/Container"; | ||
| import OverflowContainer from "@/components/Common/Container/OverflowContainer"; | ||
| import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider"; | ||
| import HomeSection from "@/components/MSE/HomeSection"; | ||
| import JoinSection from "@/components/MSE/JoinSection"; | ||
| import LanguageIconSection from "@/components/MSE/LanguageIconSection"; | ||
| import MmsweTypoSection from "@/components/MSE/MmsweTypoSection"; | ||
| import PlatformSection from "@/components/MSE/PlatformSection"; | ||
| import { generateColor } from "@/utils"; | ||
|
|
||
| export default function HomePageComponent() { | ||
| const color = generateColor(); | ||
| const bgColor = `${color} bg-opacity-[0.35]`; | ||
|
|
||
| return ( | ||
| <> | ||
| <Container withPadding> | ||
| {/* Home Section: Start */} | ||
| <HomeSection bgColor={bgColor} /> | ||
| {/* Home Section: Finished */} | ||
|
|
||
| <SpacingDivider /> | ||
|
|
||
| {/* Joined Section: Start */} | ||
| <JoinSection bgColor={bgColor} /> | ||
| {/* Joined Section: Finished */} | ||
|
|
||
| <SpacingDivider size="lg" /> | ||
| </Container> | ||
|
|
||
| <OverflowContainer> | ||
| {/* LanguageIcon Section: Start */} | ||
| <SpacingDivider size="sm" /> | ||
|
|
||
| <LanguageIconSection bgColor={bgColor} /> | ||
| {/* LanguageIcon Section: Finished */} | ||
|
|
||
| <SpacingDivider size="sm" /> | ||
|
|
||
| {/* Typo Sectino: Start */} | ||
| <MmsweTypoSection bgColor={bgColor} /> | ||
| {/* Typo Sectino: Finished */} | ||
| <SpacingDivider size="sm" /> | ||
| </OverflowContainer> | ||
|
|
||
| <Container withPadding> | ||
| {/* Platform Section: Start */} | ||
| <PlatformSection bgColor={bgColor} /> | ||
| {/* Platform Section: Start */} | ||
| </Container> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,16 @@ | ||
| import Container from "@/components/Common/Container/Container"; | ||
| import OverflowContainer from "@/components/Common/Container/OverflowContainer"; | ||
| import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider"; | ||
| import HomeSection from "@/components/MSE/HomeSection"; | ||
| import JoinSection from "@/components/MSE/JoinSection"; | ||
| import LanguageIconSection from "@/components/MSE/LanguageIconSection"; | ||
| import MmsweTypoSection from "@/components/MSE/MmsweTypoSection"; | ||
| import PlatformSection from "@/components/MSE/PlatformSection"; | ||
| import APP_CONFIG from "@/config/config"; | ||
| import { generateColor } from "@/utils"; | ||
| import { Metadata } from "next"; | ||
| import HomePageComponent from "./components/HomePageComponent"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: `Home | ${APP_CONFIG.title}`, | ||
| description: APP_CONFIG.description, | ||
| }; | ||
|
|
||
| export default function HomePage() { | ||
| const bgColor = `${generateColor()} bg-opacity-20`; | ||
|
|
||
| return ( | ||
| <> | ||
| <Container withPadding> | ||
| {/* Home Section: Start */} | ||
| <HomeSection bgColor={bgColor} /> | ||
| {/* Home Section: Finished */} | ||
|
|
||
| <SpacingDivider /> | ||
|
|
||
| {/* Joined Section: Start */} | ||
| <JoinSection bgColor={bgColor} /> | ||
| {/* Joined Section: Finished */} | ||
|
|
||
| <SpacingDivider size="lg" /> | ||
| </Container> | ||
|
|
||
| <OverflowContainer> | ||
| {/* LanguageIcon Section: Start */} | ||
| <SpacingDivider size="sm" /> | ||
|
|
||
| <LanguageIconSection bgColor={bgColor} /> | ||
| {/* LanguageIcon Section: Finished */} | ||
|
|
||
| <SpacingDivider size="sm" /> | ||
|
|
||
| {/* Typo Sectino: Start */} | ||
| <MmsweTypoSection /> | ||
| {/* Typo Sectino: Finished */} | ||
| <SpacingDivider size="sm" /> | ||
| </OverflowContainer> | ||
|
|
||
| <Container withPadding> | ||
| {/* Platform Section: Start */} | ||
| <PlatformSection bgColor={bgColor} /> | ||
| {/* Platform Section: Start */} | ||
| </Container> | ||
| <HomePageComponent /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
src/components/Profile/ProfileCardList/ProfileCardList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| "use client"; | ||
|
|
||
| import TitleText from "@/components/Common/TitleText/TitleText"; | ||
| import SquareBox from "@/components/Ui/SquareBox/SquareBox"; | ||
| import { cn, generateColor } from "@/utils"; | ||
| import { Profile } from "contentlayer/generated"; | ||
| import Link from "next/link"; | ||
|
|
||
| const ProfileCardList = ({ profiles }: { profiles: Profile[] }) => { | ||
| return ( | ||
| <> | ||
| {profiles.map((profile) => { | ||
| const bgColor = generateColor(); | ||
|
|
||
| return ( | ||
| <div key={profile._id}> | ||
| <Link href={`/profile/${profile.slugAsParams}`}> | ||
| <SquareBox | ||
| className={cn( | ||
| "transition ease-out cursor-pointer hover:opacity-80 hover:-translate-y-1 bg-opacity-30 min-h-[130px]", | ||
| bgColor | ||
| )} | ||
| > | ||
| <div className="flex flex-row items-center mb-2 space-x-2"> | ||
| <div | ||
| className={cn( | ||
| "flex justify-center items-center h-10 w-10 rounded-full", | ||
| bgColor | ||
| )} | ||
| > | ||
| {profile.name?.trim()?.[0]} | ||
| </div> | ||
| <TitleText tag="h4" className="text-base"> | ||
| {profile.name} | ||
| </TitleText> | ||
| </div> | ||
| <TitleText tag="h4" className="text-sm"> | ||
| {profile.description} | ||
| </TitleText> | ||
| </SquareBox> | ||
| </Link> | ||
| </div> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| }; | ||
| export default ProfileCardList; |
Oops, something went wrong.