generated from resir014/nextjs-typescript-quickstart
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
61 changed files
with
3,458 additions
and
3,404 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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,18 +1,18 @@ | ||
| import { Grid } from "@/components/grid"; | ||
| import { H1, H5 } from "@/components/typography"; | ||
| import { Grid } from '@/components/grid' | ||
| import { H1, H5 } from '@/components/typography' | ||
|
|
||
| interface BlogTitle { | ||
| title: string; | ||
| blogInfo: string; | ||
| title: string | ||
| blogInfo: string | ||
| } | ||
|
|
||
| export function BlogTitle({ title, blogInfo }: BlogTitle) { | ||
| return ( | ||
| <Grid> | ||
| <div className="col-span-full flex flex-col space-y-4 self-stretch"> | ||
| <H1>{title}</H1> | ||
| <H5 variant="secondary">{blogInfo}</H5> | ||
| </div> | ||
| </Grid> | ||
| ); | ||
| return ( | ||
| <Grid> | ||
| <div className="col-span-full flex flex-col space-y-4 self-stretch"> | ||
| <H1>{title}</H1> | ||
| <H5 variant="secondary">{blogInfo}</H5> | ||
| </div> | ||
| </Grid> | ||
| ) | ||
| } |
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,31 +1,31 @@ | ||
| import { getImageBuilder, getImgProps } from "@/utils/images"; | ||
| import { getImageBuilder, getImgProps } from '@/utils/images' | ||
|
|
||
| function CloudinaryImg({ | ||
| cloudinaryId, | ||
| imgProps, | ||
| transparentBackground, | ||
| cloudinaryId, | ||
| imgProps, | ||
| transparentBackground, | ||
| }: { | ||
| cloudinaryId: string; | ||
| imgProps: JSX.IntrinsicElements["img"]; | ||
| transparentBackground?: boolean; | ||
| cloudinaryId: string | ||
| imgProps: JSX.IntrinsicElements['img'] | ||
| transparentBackground?: boolean | ||
| }) { | ||
| return ( | ||
| <img | ||
| className="w-full rounded-lg object-cover py-8" | ||
| {...getImgProps(getImageBuilder(cloudinaryId, imgProps.alt), { | ||
| widths: [350, 550, 700, 845, 1250, 1700, 2550], | ||
| sizes: [ | ||
| "(max-width:1023px) 80vw", | ||
| "(min-width:1024px) and (max-width:1620px) 50vw", | ||
| "850px", | ||
| ], | ||
| transformations: { | ||
| background: transparentBackground ? undefined : "rgb:e6e9ee", | ||
| }, | ||
| })} | ||
| {...imgProps} | ||
| /> | ||
| ); | ||
| return ( | ||
| <img | ||
| className="w-full rounded-lg object-cover py-8" | ||
| {...getImgProps(getImageBuilder(cloudinaryId, imgProps.alt), { | ||
| widths: [350, 550, 700, 845, 1250, 1700, 2550], | ||
| sizes: [ | ||
| '(max-width:1023px) 80vw', | ||
| '(min-width:1024px) and (max-width:1620px) 50vw', | ||
| '850px', | ||
| ], | ||
| transformations: { | ||
| background: transparentBackground ? undefined : 'rgb:e6e9ee', | ||
| }, | ||
| })} | ||
| {...imgProps} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export { CloudinaryImg }; | ||
| export { CloudinaryImg } |
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,18 +1,18 @@ | ||
| import { Grid } from "@/components/grid"; | ||
| import { H1, H4 } from "@/components/typography"; | ||
| import { Grid } from '@/components/grid' | ||
| import { H1, H4 } from '@/components/typography' | ||
|
|
||
| interface HeaderSection { | ||
| title: string; | ||
| subTitle: string; | ||
| title: string | ||
| subTitle: string | ||
| } | ||
|
|
||
| export function HeaderSection({ title, subTitle }: HeaderSection) { | ||
| return ( | ||
| <Grid> | ||
| <div className="col-span-full flex flex-col self-stretch"> | ||
| <H1 className="uppercase">{title}</H1> | ||
| <H4 variant="secondary">{subTitle}</H4> | ||
| </div> | ||
| </Grid> | ||
| ); | ||
| return ( | ||
| <Grid> | ||
| <div className="col-span-full flex flex-col self-stretch"> | ||
| <H1 className="uppercase">{title}</H1> | ||
| <H4 variant="secondary">{subTitle}</H4> | ||
| </div> | ||
| </Grid> | ||
| ) | ||
| } |
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,37 +1,37 @@ | ||
| import { type ChangeEventHandler } from "react"; | ||
| import { type ChangeEventHandler } from 'react' | ||
|
|
||
| import { clsxm } from "@/utils/clsxm"; | ||
| import { clsxm } from '@/utils/clsxm' | ||
|
|
||
| import { CustomCheckboxContainer, CustomCheckboxInput } from "@reach/checkbox"; | ||
| import { CustomCheckboxContainer, CustomCheckboxInput } from '@reach/checkbox' | ||
|
|
||
| interface TagProps { | ||
| tag: string; | ||
| selected: boolean; | ||
| onClick?: ChangeEventHandler<HTMLInputElement>; | ||
| disabled?: boolean; | ||
| tag: string | ||
| selected: boolean | ||
| onClick?: ChangeEventHandler<HTMLInputElement> | ||
| disabled?: boolean | ||
| } | ||
|
|
||
| function Tag({ tag, selected, onClick, disabled }: TagProps) { | ||
| return ( | ||
| <CustomCheckboxContainer | ||
| as="label" | ||
| checked={selected} | ||
| onChange={onClick} | ||
| className={clsxm( | ||
| "relative mb-3 mr-3 block h-auto w-auto cursor-pointer rounded-full px-4 py-1.5 transition", | ||
| { | ||
| "bg-base text-black dark:bg-body dark:text-white": !selected, | ||
| "bg-body text-white dark:bg-base dark:text-dark": selected, | ||
| "focus-ring opacity-100": !disabled, | ||
| "opacity-25": disabled, | ||
| } | ||
| )} | ||
| disabled={disabled} | ||
| > | ||
| <CustomCheckboxInput checked={selected} value={tag} className="sr-only" /> | ||
| <span>{tag}</span> | ||
| </CustomCheckboxContainer> | ||
| ); | ||
| return ( | ||
| <CustomCheckboxContainer | ||
| as="label" | ||
| checked={selected} | ||
| onChange={onClick} | ||
| className={clsxm( | ||
| 'relative mb-3 mr-3 block h-auto w-auto cursor-pointer rounded-full px-4 py-1.5 transition', | ||
| { | ||
| 'bg-base text-black dark:bg-body dark:text-white': !selected, | ||
| 'bg-body text-white dark:bg-base dark:text-dark': selected, | ||
| 'focus-ring opacity-100': !disabled, | ||
| 'opacity-25': disabled, | ||
| }, | ||
| )} | ||
| disabled={disabled} | ||
| > | ||
| <CustomCheckboxInput checked={selected} value={tag} className="sr-only" /> | ||
| <span>{tag}</span> | ||
| </CustomCheckboxContainer> | ||
| ) | ||
| } | ||
|
|
||
| export { Tag }; | ||
| export { Tag } |
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,36 +1,36 @@ | ||
| import { Themed } from "@/utils/theme-provider"; | ||
| import { Themed } from '@/utils/theme-provider' | ||
|
|
||
| import { CloudinaryImg } from "./cloudinary-img"; | ||
| import { CloudinaryImg } from './cloudinary-img' | ||
|
|
||
| function ThemedBlogImage({ | ||
| darkCloudinaryId, | ||
| lightCloudinaryId, | ||
| imgProps, | ||
| transparentBackground, | ||
| darkCloudinaryId, | ||
| lightCloudinaryId, | ||
| imgProps, | ||
| transparentBackground, | ||
| }: { | ||
| darkCloudinaryId: string; | ||
| lightCloudinaryId: string; | ||
| imgProps: JSX.IntrinsicElements["img"]; | ||
| transparentBackground?: boolean; | ||
| darkCloudinaryId: string | ||
| lightCloudinaryId: string | ||
| imgProps: JSX.IntrinsicElements['img'] | ||
| transparentBackground?: boolean | ||
| }) { | ||
| return ( | ||
| <Themed | ||
| light={ | ||
| <CloudinaryImg | ||
| cloudinaryId={lightCloudinaryId} | ||
| imgProps={imgProps} | ||
| transparentBackground={transparentBackground} | ||
| /> | ||
| } | ||
| dark={ | ||
| <CloudinaryImg | ||
| cloudinaryId={darkCloudinaryId} | ||
| imgProps={imgProps} | ||
| transparentBackground={transparentBackground} | ||
| /> | ||
| } | ||
| /> | ||
| ); | ||
| return ( | ||
| <Themed | ||
| light={ | ||
| <CloudinaryImg | ||
| cloudinaryId={lightCloudinaryId} | ||
| imgProps={imgProps} | ||
| transparentBackground={transparentBackground} | ||
| /> | ||
| } | ||
| dark={ | ||
| <CloudinaryImg | ||
| cloudinaryId={darkCloudinaryId} | ||
| imgProps={imgProps} | ||
| transparentBackground={transparentBackground} | ||
| /> | ||
| } | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export { ThemedBlogImage }; | ||
| export { ThemedBlogImage } |
Oops, something went wrong.