-
Notifications
You must be signed in to change notification settings - Fork 14
feat(update/director): Update in Directors Message #289
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.
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
Open
Debatreya
wants to merge
5
commits into
master
Choose a base branch
from
feat/director
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
40a1633
feat(update/director): Update in Directors Message
Debatreya 9b489c9
fix(overlap): Directors image overlap
Debatreya 45eb414
feat(director): Updated backgroung img
Debatreya 4f33b0f
fix(package): Removed yarn 'npm uninstall yarn'
Debatreya 13dc168
feat(director): Tried to resolve the requested reviews
Debatreya File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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,7 +1,64 @@ | ||
| import Image from 'next/image'; | ||
|
|
||
| import Heading from '~/components/heading'; | ||
| import { getTranslations } from '~/i18n/translations'; | ||
| import { getS3Url } from '~/server/s3'; | ||
|
|
||
| const directorCard = { | ||
| image: `${getS3Url()}/assets/director.jpeg`, | ||
| alt: "Director's Image", | ||
| title: 'Director', | ||
| name: 'Professor B.V. Ramana Reddy', | ||
| position: 'Director', | ||
| institute: 'National Institute of Technology, Kurukshetra', | ||
| contact: { | ||
| phone: ['01744-233201', '01744-233204', '01744-238083'], | ||
| fax: '01744-238494', | ||
| mobile: '+91 74978 22212', | ||
| email: '[email protected]', | ||
| }, | ||
| }; | ||
|
|
||
| // Placeholder data for office cards. Replace with real data as needed. | ||
| const directorOfficeCards = [ | ||
| { | ||
| image: `${getS3Url()}/assets/office.jpeg`, | ||
| alt: "Director's Office Image 1", | ||
| name: 'Arun Goel', | ||
| position: 'Professor (Head of the Department)', | ||
| email: '[email protected]', | ||
| phone: ['01744-233349', '01744-233300'], | ||
| }, | ||
| { | ||
| image: `${getS3Url()}/assets/office.jpeg`, | ||
| alt: "Director's Office Image 2", | ||
| name: 'Arun Goel', | ||
| position: 'Professor (Head of the Department)', | ||
| email: '[email protected]', | ||
| phone: ['01744-233349', '01744-233300'], | ||
| }, | ||
| { | ||
| image: `${getS3Url()}/assets/office.jpeg`, | ||
| alt: "Director's Office Image 3", | ||
| name: 'Arun Goel', | ||
| position: 'Professor (Head of the Department)', | ||
| email: '[email protected]', | ||
| phone: ['01744-233349', '01744-233300'], | ||
| }, | ||
| { | ||
| image: `${getS3Url()}/assets/office.jpeg`, | ||
| alt: "Director's Office Image 4", | ||
| name: 'Arun Goel', | ||
| position: 'Professor (Head of the Department)', | ||
| email: '[email protected]', | ||
| phone: ['01744-233349', '01744-233300'], | ||
| }, | ||
| ]; | ||
| const directorOffice = { | ||
| title: "Director's Office", | ||
| cards: directorOfficeCards, | ||
| }; | ||
|
|
||
| export default async function DirectorCorner({ | ||
| params: { locale }, | ||
| }: { | ||
|
|
@@ -10,55 +67,182 @@ export default async function DirectorCorner({ | |
| const text = (await getTranslations(locale)).DirectorMessage; | ||
| return ( | ||
| <> | ||
| <section | ||
| className="container" | ||
| {/* For DIRECTOR CARD */} | ||
GetPsyched marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <div | ||
| className="w-full bg-cover bg-center" | ||
| style={{ | ||
| backgroundImage: `linear-gradient(rgba(249, 245, 235, 1) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 1) 100%), url('${getS3Url()}/assets/temple-1.jpeg')`, | ||
| backgroundImage: `url('${getS3Url()}/assets/director-bg.jpeg')`, | ||
| }} | ||
| > | ||
| <Heading | ||
| text={text.title.toUpperCase()} | ||
| heading="h3" | ||
| glyphDirection="dual" | ||
| /> | ||
| <article className="flex max-md:flex-col"> | ||
| <p className="text-lg max-md:rounded-t md:w-full md:rounded-r "> | ||
| {text.message.slice(0, 7).map((message, index) => ( | ||
| <span key={index} className="mb-5 block"> | ||
| {message} | ||
| </span> | ||
| ))} | ||
| </p> | ||
| </article> | ||
| <article className="mx-auto flex items-center justify-center max-md:flex-col"> | ||
| <p className="w-fit max-w-4xl text-center text-lg max-md:rounded-t md:rounded-r"> | ||
| {text.message.slice(7, 9).map((message, index) => ( | ||
| <span key={index} className="mb-5 block"> | ||
| {message} | ||
| </span> | ||
| ))} | ||
| </p> | ||
| </article> | ||
| <article className="flex max-md:flex-col"> | ||
| <p className="text-lg max-md:rounded-t md:w-full md:rounded-r "> | ||
| {text.message.slice(9, 11).map((message, index) => ( | ||
| <span key={index} className="mb-3 block"> | ||
| {message} | ||
| </span> | ||
| <section className="container mx-auto"> | ||
| <Heading | ||
| text={directorCard.title.toUpperCase()} | ||
| heading="h2" | ||
| glyphDirection="dual" | ||
| /> | ||
| <article className="flex h-fit w-full items-center justify-center"> | ||
| <Card | ||
| imageAlt={directorCard.alt} | ||
| imageSrc={directorCard.image} | ||
| name={directorCard.name} | ||
| designation={`${directorCard.position}, ${directorCard.institute}`} | ||
| contactDetails={[ | ||
| { | ||
| label: directorCard.contact.phone.join(' '), | ||
| icon: 'Phone No.', | ||
| }, | ||
| { | ||
| label: directorCard.contact.fax, | ||
| icon: 'Fax No.', | ||
| }, | ||
| { | ||
| label: directorCard.contact.mobile, | ||
| icon: 'Mobile', | ||
| }, | ||
| { | ||
| label: directorCard.contact.email, | ||
| icon: 'Email-ID', | ||
| }, | ||
| ]} | ||
| /> | ||
| </article> | ||
| </section> | ||
| </div> | ||
| {/* For DIRECTOR OFFICE CARDS */} | ||
| <div | ||
| className="w-full bg-cover bg-center" | ||
| style={{ | ||
| backgroundImage: `url('${getS3Url()}/assets/office-bg.jpeg')`, | ||
| }} | ||
| > | ||
| <section className="container mx-auto py-8"> | ||
| <Heading | ||
| text={directorOffice.title.toUpperCase()} | ||
| heading="h3" | ||
| glyphDirection="rtl" | ||
| /> | ||
| <div className="grid grid-cols-1 gap-6 lg:grid-cols-2"> | ||
| {directorOffice.cards.map((card, index) => ( | ||
| <Card | ||
| key={index} | ||
| imageAlt={card.alt} | ||
| imageSrc={card.image} | ||
| name={card.name} | ||
| designation={card.position} | ||
| contactDetails={[ | ||
| { | ||
| label: card.phone.join(' '), | ||
| icon: 'Phone No.', | ||
| }, | ||
| { | ||
| label: card.email, | ||
| icon: 'Email-ID', | ||
| }, | ||
| ]} | ||
| /> | ||
| ))} | ||
| </p> | ||
| </article> | ||
| <article className="mx-auto flex items-center justify-center max-md:flex-col"> | ||
| <p className="w-fit max-w-4xl text-justify text-lg max-md:rounded-t md:rounded-r"> | ||
| <span className="bold mb-5 block">{text.message[11]}</span> | ||
| </p> | ||
| </article> | ||
| <article className="flex-end flex justify-end"> | ||
| <p className="w-fit max-w-4xl text-justify text-lg font-bold max-md:rounded-t md:rounded-r"> | ||
| <span className="bold mb-5 block">{text.message[12]}</span> | ||
| </p> | ||
| </article> | ||
| </section> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| {/* For DIRECTOR's MESSAGE */} | ||
| <div | ||
| className="w-full bg-cover bg-center" | ||
| style={{ | ||
| backgroundImage: `linear-gradient(rgba(249, 245, 235, 0.95) 0%, rgba(249, 245, 235, 0.85) 85%, rgba(249, 245, 235, 0.95) 100%), url('${getS3Url()}/assets/temple-1.jpeg')`, | ||
| }} | ||
| > | ||
| <section className="container mx-auto"> | ||
| <Heading | ||
| text={text.title.toUpperCase()} | ||
| heading="h3" | ||
| glyphDirection="dual" | ||
| /> | ||
| <article className="w-full"> | ||
| <div className="flex flex-col gap-5 text-lg max-md:rounded-t md:w-full md:rounded-r"> | ||
| {(text.message as unknown as string[]).map((message, index) => ( | ||
| <span | ||
| key={index} | ||
| className={ | ||
| index === 11 | ||
| ? 'bold mb-5 block' | ||
| : index === 12 | ||
| ? 'bold mb-5 block text-right font-bold' | ||
| : index >= 9 && index <= 10 | ||
| ? 'mb-3 block' | ||
| : 'mb-5 block' | ||
| } | ||
| > | ||
| {message.toString()} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| </article> | ||
| </section> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const Card = ({ | ||
| imageAlt, | ||
| imageSrc, | ||
| name, | ||
| designation, | ||
| isDepartmentHead = false, | ||
| departmentHeadText = '', | ||
| contactDetails, | ||
| }: { | ||
| imageAlt: string; | ||
| imageSrc: string; | ||
| name: string; | ||
| designation: string; | ||
| isDepartmentHead?: boolean; | ||
| departmentHeadText?: string; | ||
| contactDetails: { label: string; icon?: React.ReactNode | string }[]; | ||
| }) => { | ||
| return ( | ||
| <div className="container flex h-full w-full items-center justify-center max-sm:p-0"> | ||
| <div className="h-fit w-fit rounded border border-primary-700 bg-neutral-50 hover:drop-shadow-md"> | ||
| <div className="flex h-full items-center justify-center gap-4 p-2 sm:p-3 md:p-4"> | ||
| <Image | ||
| alt={imageAlt} | ||
| className={`rounded ${ | ||
| imageAlt === "Director's Image" | ||
| ? 'size-32 md:size-40 lg:size-44 xl:size-48 2xl:size-52' | ||
| : 'size-32 lg:size-36 xl:size-40 2xl:size-44' | ||
| }`} | ||
| src={imageSrc} | ||
| width={160} | ||
| height={160} | ||
| // You can adjust width/height as needed for your design | ||
| /> | ||
| <main className="flex w-fit flex-col p-4"> | ||
| <header className="mb-1 sm:mb-2 md:mb-3 lg:mb-4"> | ||
| <h4 className="mb-0">{name}</h4> | ||
| <p | ||
| className={ | ||
| designation.toLowerCase().includes('director') | ||
| ? 'font-semibold' | ||
| : '' | ||
| } | ||
| > | ||
| {designation} | ||
| {isDepartmentHead && ` (${departmentHeadText})`} | ||
| </p> | ||
| </header> | ||
| <ul> | ||
| {contactDetails.map((detail, index) => ( | ||
| <li key={index} className="flex items-center gap-1"> | ||
| <span> | ||
| <b>{detail.icon}</b> | ||
| </span> | ||
| :<span>{detail.label}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nitpick] The directorOfficeCards array includes multiple entries with identical data. If these are placeholders, please add a comment clarifying; otherwise, consider providing unique details to improve maintainability.