Skip to content

Commit

Permalink
Merge pull request #3 from handywijaya/album/sg-my-2024
Browse files Browse the repository at this point in the history 
Added singapore malaysia 2024 album
  • Loading branch information
@handywijaya
handywijaya authored Jan 12, 2025
2 parents dc92fb0 + 4f42914 commit cbd58f6
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 4 deletions.
18 changes: 18 additions & 0 deletions src/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
@use 'sass:map';

$colors: (
singapore-malaysia-2024: (
base: #2b2e4a, // need to be in sync with utils/const.ts
base2: #f8c471,
button: #27ae60,
button-hover: #1f7a4d,
title-color: #f4f4f9,
caption-color: #a3b0c6,
),
refreshing-bali-2020: (
base: #d1e4e2, // need to be in sync with utils/const.ts
base2: #f4e1c1,
Expand Down Expand Up @@ -42,6 +50,16 @@ $colors: (
background: map.get($theme-values, base);
}

&-title {
color: #000000;
color: map.get($theme-values, title-color);
}

&-caption {
color: #64748b;
color: map.get($theme-values, caption-color);
}

&-button {
background: map.get($theme-values, button);
color: white;
Expand Down
8 changes: 6 additions & 2 deletions src/components/Album/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState, useRef } from 'react'
import cn from 'classnames';

import { Collection, CollectionImage, CollectionImageType } from '../../interfaces/Collections'

Expand Down Expand Up @@ -90,11 +91,14 @@ const Album: React.FC<Props> = ({ collection }) => {
</div>
)

const theme = `Theme-${collection.id}`;
const titleClassName = cn('m-0 font-semibold text-[40px] drop-shadow-lg', `${theme}-title`)
const captionClassName = cn('text-[16px]', `${theme}-caption`)
return (
<div className="mb-[20px] text-center max-w-screen-lg m-auto">
<div className="mb-[20px]">
<h2 className="m-0 font-semibold text-[40px] drop-shadow-lg">{collection.title}</h2>
<p className="text-[16px] text-slate-700">{collection.caption}</p>
<h2 className={titleClassName}>{collection.title}</h2>
<p className={captionClassName}>{collection.caption}</p>
</div>
{renderPhotoBook(collection)}
<ToolTip
Expand Down
6 changes: 4 additions & 2 deletions src/components/PreviewAlbum/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,15 @@ const PreviewAlbum: React.FC<Props> = ({ collection, onOpenCollection }) => {

const theme = `Theme-${collection.id}`;
const className = cn('border border-gray-300 rounded-lg shadow-lg overflow-hidden max-w-[300px] text-center mb-[20px]', `${theme}-preview`)
const titleClassName = cn('font-bold text-[20px] py-[8px]', `${theme}-title`)
const captionClassName = cn('italic text-[16px] min-h-[75px] content-center', `${theme}-caption`)
const btnClassName = cn('button my-[16px]', `${theme}-button`)
return (
<div className={className}>
{renderPreviewImages()}
<div className="px-[18px]">
<h2 className="font-bold text-[20px] py-[8px]">{collection.title}</h2>
<p className="text-slate-500 italic text-[16px] min-h-[75px] content-center">{collection.caption}</p>
<h2 className={titleClassName}>{collection.title}</h2>
<p className={captionClassName}>{collection.caption}</p>
<div className={btnClassName} onClick={() => openCollection(collection.id)}>
View Full Album
</div>
Expand Down
191 changes: 191 additions & 0 deletions src/utils/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,197 @@ class Constant {
public static readonly BASE_TITLE:string = "My Travel Album"

public static readonly COLLECTIONS:Collections = {
"singapore-malaysia-2024": {
id: 'singapore-malaysia-2024',
title: 'Singapore Malaysia - 2024',
caption: 'Exploring the wonders of Singapore and Malaysia during Christmas 2024! 🎄✨',
popupColor: '#2b2e4a', // need to be in sync with _theme.scss
previewImageIdx: [4, 21],
images: [
{
title: 'The Waterfall @ Garden by the Bay',
caption: 'The Waterfall @ Garden by the Bay',
url: 'https://i.imgur.com/SrMOIDQ.jpeg',
previewUrl: 'https://i.imgur.com/SrMOIDQm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Christmas @ Garden by the Bay',
caption: 'Christmas @ Garden by the Bay',
url: 'https://i.imgur.com/Vz3ZTP0.jpeg',
previewUrl: 'https://i.imgur.com/Vz3ZTP0m.jpeg',
type: CollectionImageType.LANDSCAPE
},
{
title: 'The Top @ Garden by the Bay',
caption: 'The Top @ Garden by the Bay',
url: 'https://i.imgur.com/qmLSalF.jpeg',
previewUrl: 'https://i.imgur.com/qmLSalFm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Night @ Supertree Grove 1',
caption: 'Night @ Supertree Grove 1',
url: 'https://i.imgur.com/H1NdinY.jpeg',
previewUrl: 'https://i.imgur.com/H1NdinYm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Night @ Supertree Grove 2',
caption: 'Night @ Supertree Grove 2',
url: 'https://i.imgur.com/Yy0v4W5.jpeg',
previewUrl: 'https://i.imgur.com/Yy0v4W5m.jpeg',
type: CollectionImageType.LANDSCAPE
},
{
title: 'Night @ Supertree Grove 3',
caption: 'Night @ Supertree Grove 3',
url: 'https://i.imgur.com/4dOs6gQ.jpeg',
previewUrl: 'https://i.imgur.com/4dOs6gQm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Street view building',
caption: 'Wish can stay here someday',
url: 'https://i.imgur.com/eucSzWr.jpeg',
previewUrl: 'https://i.imgur.com/eucSzWrm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Dickson Nasi Lemak',
caption: 'One is not enough',
url: 'https://i.imgur.com/h2cggAW.jpeg',
previewUrl: 'https://i.imgur.com/h2cggAWm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'MBS and Esplanade',
caption: 'MBS and Esplanade',
url: 'https://i.imgur.com/yrmfybU.jpeg',
previewUrl: 'https://i.imgur.com/yrmfybUm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Orchid @ National Orchid Garden 1',
caption: 'Orchid @ National Orchid Garden 1',
url: 'https://i.imgur.com/qCI7JYs.jpeg',
previewUrl: 'https://i.imgur.com/qCI7JYsm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Orchid @ National Orchid Garden 2',
caption: 'Orchid @ National Orchid Garden 2',
url: 'https://i.imgur.com/9YbHXXA.jpeg',
previewUrl: 'https://i.imgur.com/9YbHXXAm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Orchid @ National Orchid Garden 3',
caption: 'Orchid @ National Orchid Garden 3',
url: 'https://i.imgur.com/XFJiQAc.jpeg',
previewUrl: 'https://i.imgur.com/XFJiQAcm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Three Meals a Day!!!',
caption: 'The best salted egg cuisine!!',
url: 'https://i.imgur.com/wVxUNbC.jpeg',
previewUrl: 'https://i.imgur.com/wVxUNbCm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Chirstmas Night @ Orchard',
caption: 'Christmas Night @ Orchard',
url: 'https://i.imgur.com/Gy2U5v8.jpeg',
previewUrl: 'https://i.imgur.com/Gy2U5v8m.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'KLCC',
caption: 'KLCC',
url: 'https://i.imgur.com/dhyEwqz.jpeg',
previewUrl: 'https://i.imgur.com/dhyEwqzm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Mee @ ICC Pudu',
caption: 'Mee @ ICC Pudu',
url: 'https://i.imgur.com/VegDdyH.jpeg',
previewUrl: 'https://i.imgur.com/VegDdyHm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Lintang @ ICC Pudu',
caption: 'Lintang @ ICC Pudu',
url: 'https://i.imgur.com/DbNxRfo.jpeg',
previewUrl: 'https://i.imgur.com/DbNxRfom.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Bunn Choon @ ICC Pudu',
caption: 'Bunn Choon @ ICC Pudu',
url: 'https://i.imgur.com/Pn7Tk3G.jpeg',
previewUrl: 'https://i.imgur.com/Pn7Tk3Gm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Batu Caves 1',
caption: 'Batu Caves',
url: 'https://i.imgur.com/7pxrYVM.jpeg',
previewUrl: 'https://i.imgur.com/7pxrYVMm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Char Siew Yoong',
caption: '4 thumbs Char Siew!',
url: 'https://i.imgur.com/V2MELP4.jpeg',
previewUrl: 'https://i.imgur.com/V2MELP4m.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Batu Caves 2',
caption: '300 stairs up and 300 stairs down',
url: 'https://i.imgur.com/OhfW4Rr.jpeg',
previewUrl: 'https://i.imgur.com/OhfW4Rrm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Kunafa Fingers',
caption: 'The dubai chocolate addict',
url: 'https://i.imgur.com/kF14zSl.jpeg',
previewUrl: 'https://i.imgur.com/kF14zSlm.jpeg',
type: CollectionImageType.LANDSCAPE
},
{
title: 'Melting Wagyu in Lot10',
caption: 'The most expensive is the best one!',
url: 'https://i.imgur.com/nfdx33h.jpeg',
previewUrl: 'https://i.imgur.com/nfdx33hm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'The Cable Car View @ Genting Highlands',
caption: 'The Cable Car View @ Genting Highlands',
url: 'https://i.imgur.com/2tLfdH6.jpeg',
previewUrl: 'https://i.imgur.com/2tLfdH6m.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Pagoda @ Genting Highlands',
caption: 'Pagoda @ Genting Highlands',
url: 'https://i.imgur.com/76LWQlT.jpeg',
previewUrl: 'https://i.imgur.com/76LWQlTm.jpeg',
type: CollectionImageType.PORTRAIT
},
{
title: 'Casino @ Genting Highlands',
caption: 'Let\'s gamble!!',
url: 'https://i.imgur.com/imKg3Jd.jpeg',
previewUrl: 'https://i.imgur.com/imKg3Jdm.jpeg',
type: CollectionImageType.LANDSCAPE
}
]
},
"refreshing-bali-2020": {
id: 'refreshing-bali-2020',
title: 'Refreshing Bali - 2020',
Expand Down

0 comments on commit cbd58f6

Please sign in to comment.