Skip to content

feat: add desktop for white starter-kit #471

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

Merged
michelleyeoh merged 8 commits into from
Apr 10, 2026
Merged

feat: add desktop for white starter-kit #471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cb373d8
feat: add desktop for white starter-kit
jackzheng-cs Apr 8, 2026
ce7ed44
chore: run lint
jackzheng-cs Apr 8, 2026
6b1f835
feat: add mobile layout
jackzheng-cs Apr 10, 2026
fd2d33a
Merge branch 'main' into 463-starterkit-white-section
michelleyeoh Apr 10, 2026
1489f41
fix calendar events
michelleyeoh Apr 10, 2026
b4e8b3b
reuse CalendarItem in teambuidling
michelleyeoh Apr 10, 2026
46b3f4e
white section done
michelleyeoh Apr 10, 2026
6c1aef4
fixes
michelleyeoh Apr 10, 2026
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
116 changes: 52 additions & 64 deletions app/(pages)/(hackers)/_components/Schedule/CalendarItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ interface CalendarItemProps {
event: Event & { originalType?: string };
attendeeCount?: number;
inPersonalSchedule?: boolean;
hideAddButton?: boolean;
disableAddButton?: boolean;
onAddToSchedule?: () => void;
onRemoveFromSchedule?: () => void;
isRecommended?: boolean;
Expand All @@ -27,6 +29,8 @@ export function CalendarItem({
event,
attendeeCount,
inPersonalSchedule = false,
hideAddButton = false,
disableAddButton = false,
tags,
host,
onAddToSchedule,
Expand All @@ -40,6 +44,9 @@ export function CalendarItem({
? normalizedType
: 'GENERAL';
const eventStyle = SCHEDULE_EVENT_STYLES[displayType];
const actionIconPath = inPersonalSchedule
? '/icons/check.svg'
: '/icons/plus.svg';

// Handle different time display scenarios
const timeDisplay = formatScheduleTimeRange(
Expand All @@ -49,27 +56,14 @@ export function CalendarItem({

return (
<div
className={`w-full py-[24px] flex-shrink-0 rounded-[16px] px-[20px] 2xs:px-[38px] 2xs:py-[24px] lg:px-[40px] lg:py-[32px] mb-[8px] flex ${
displayType === 'ACTIVITIES' ? 'flex-row' : 'flex-col justify-center'
}`}
className="w-full py-[24px] flex-shrink-0 rounded-[16px] px-[20px] 2xs:px-[38px] 2xs:py-[24px] lg:px-[40px] lg:py-[32px] mb-[8px] flex flex-col justify-center"
style={{
backgroundColor: eventStyle.bgColor,
color: eventStyle.textColor,
}}
>
<div
className={`flex items-start justify-between sm:items-center gap-[40px] md:gap-[60px] relative ${
displayType === 'ACTIVITIES'
? 'w-full flex-col sm:flex-row'
: 'flex-col'
}`}
>
<div
className={`flex flex-col sm:flex-row justify-between items-start gap-4 sm:gap-6 ${
// top
displayType !== 'ACTIVITIES' ? 'w-full' : ''
}`}
>
<div className="flex items-start justify-between sm:items-center gap-[40px] relative flex-col">
<div className="flex flex-col sm:flex-row justify-between items-start gap-4 sm:gap-6 w-full">
<div className="w-full sm:w-auto">
<h2 className="font-metropolis text-[18px] md:text-[20px] font-semibold tracking-[0.72px] mb-1 text-balance">
{name}
Expand Down Expand Up @@ -123,13 +117,8 @@ export function CalendarItem({
)}
</div>
{displayType !== 'GENERAL' && displayType !== 'MEALS' && (
<div
className={`flex flex-row justify-between items-center gap-2 sm:gap-6 w-full ${
//bottom
displayType !== 'ACTIVITIES' ? '' : 'sm:w-auto'
}`}
>
{displayType === 'WORKSHOPS' && (
<div className="flex flex-row justify-between items-center gap-2 sm:gap-6 w-full">
{(displayType === 'WORKSHOPS' || displayType === 'ACTIVITIES') && (
<div
className={`flex gap-2 items-center w-full sm:w-auto ${
attendeeCount && attendeeCount > 0
Expand All @@ -150,47 +139,46 @@ export function CalendarItem({
</div>
)}

<div className="flex flex-col gap-2 items-end sm:w-auto ml-auto">
<Button
onClick={
inPersonalSchedule ? onRemoveFromSchedule : onAddToSchedule
}
className="w-auto h-auto px-9 py-4 rounded-3xl cursor-pointer relative shrink-0 hover:brightness-[97%] hover:saturate-[140%]"
style={{
backgroundColor:
eventStyle.addButtonColor || 'rgba(0, 0, 0, 0)',
color: eventStyle.textColor,
}}
variant="ghost"
>
<p className="font-semibold relative text-[14px] z-10 inline-flex items-center gap-2">
<span
aria-hidden
className="inline-block w-4 h-4"
style={{
backgroundColor: 'currentColor',
WebkitMaskImage: `url(${
inPersonalSchedule
? '/icons/check.svg'
: '/icons/plus.svg'
})`,
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
WebkitMaskSize: 'contain',
maskImage: `url(${
inPersonalSchedule
? '/icons/check.svg'
: '/icons/plus.svg'
})`,
maskRepeat: 'no-repeat',
maskPosition: 'center',
maskSize: 'contain',
}}
/>
{inPersonalSchedule ? 'Added' : 'Add'}
</p>
</Button>
</div>
{!hideAddButton && (
<div className="flex flex-col gap-2 items-end sm:w-auto ml-auto">
<Button
onClick={
inPersonalSchedule ? onRemoveFromSchedule : onAddToSchedule
}
disabled={disableAddButton}
className={`w-auto h-auto px-9 py-4 rounded-3xl relative shrink-0 ${
disableAddButton
? 'cursor-not-allowed opacity-60'
: 'cursor-pointer hover:brightness-[97%] hover:saturate-[140%]'
}`}
style={{
backgroundColor:
eventStyle.addButtonColor || 'rgba(0, 0, 0, 0)',
color: eventStyle.textColor,
}}
variant="ghost"
>
<p className="font-semibold relative text-[14px] z-10 inline-flex items-center gap-2">
<span
aria-hidden
className="inline-block w-4 h-4"
style={{
backgroundColor: 'currentColor',
WebkitMaskImage: `url(${actionIconPath})`,
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
WebkitMaskSize: 'contain',
maskImage: `url(${actionIconPath})`,
maskRepeat: 'no-repeat',
maskPosition: 'center',
maskSize: 'contain',
}}
/>
{inPersonalSchedule ? 'Added' : 'Add'}
</p>
</Button>
</div>
)}
</div>
)}
</div>
Expand Down
94 changes: 68 additions & 26 deletions app/(pages)/(hackers)/_components/StarterKit/Ideate/IdeateMentorCallout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,98 @@
import Image from 'next/image';
import { ArrowRight } from 'lucide-react';
import type { StaticImageData } from 'next/image';
import type { ReactNode } from 'react';
import mentorGraphic from '@public/hackers/starter-kit/ideate/TalkMentor.svg';
import IdeateSection from './IdeateSection';

export default function IdeateMentorCallout() {
const mentorDiscordLink = 'https://discord.gg/wc6QQEc';
interface MentorCalloutCardProps {
imageSrc: StaticImageData;
imageAlt: string;
eyebrow: string;
description: ReactNode;
note?: ReactNode;
noteBgClassName?: string;
ctaHref: string;
ctaLabel: string;
}

export function MentorCalloutCard({
imageSrc,
imageAlt,
eyebrow,
description,
note,
noteBgClassName,
ctaHref,
ctaLabel,
}: MentorCalloutCardProps) {
return (
<IdeateSection eyebrow=" " title="">
<div className="grid items-start gap-8 md:grid-cols-[minmax(320px,0.95fr)_minmax(0,1fr)] md:gap-10 lg:gap-14">
<div className="relative order-1 mx-auto flex aspect-[1.72] w-full max-w-[44rem] items-center justify-center overflow-hidden rounded-[28px] bg-[#E4FFFE] md:order-1 md:mx-0">
<div className="relative order-1 mx-auto flex w-full max-w-[44rem] items-center justify-center overflow-hidden rounded-[28px] md:order-1 md:mx-0">
<Image
src={mentorGraphic}
alt="HackDavis mentor illustration"
className="relative h-full w-full object-contain"
src={imageSrc}
alt={imageAlt}
className="w-full h-auto object-contain"
/>
</div>
<div className="order-2 flex flex-col gap-6 md:order-2">
<p className="text-[1rem] font-dm-mono uppercase text-[#00000066]">
Still Feel Stuck?
{eyebrow}
</p>
<p className="max-w-[38rem] text-[#656565] text-[1rem]">
No worries, we have a panel of industry mentors who are ready to
lend you help at any part of your development process.
{description}
</p>
<div className="hidden rounded-[20px] bg-[#E9FBBA] px-6 py-5 text-[#000000a6] md:block md:px-8 md:py-6">
<p className="text-[1rem]">
<span className="italic">Note:</span> If you have any questions
regarding hackathon events, please contact a{' '}
<a
href="https://discord.gg/Ba5xAtf8"
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-4"
>
director
</a>
.
</p>
</div>
{note ? (
<div
className={`hidden rounded-[20px] px-6 py-5 text-[#000000a6] md:block md:px-8 md:py-6 ${
noteBgClassName || 'bg-[#E9FBBA]'
}`}
>
<p className="text-[1rem]">{note}</p>
</div>
) : null}
<div className="pt-1">
<a
href={mentorDiscordLink}
href={ctaHref}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-3 font-dm-mono text-[1.125rem] uppercase text-[#3F3F3F] underline underline-offset-4 transition hover:opacity-75"
>
<ArrowRight className="h-5 w-5" />
Contact a mentor
{ctaLabel}
</a>
</div>
</div>
</div>
</IdeateSection>
);
}

export default function IdeateMentorCallout() {
return (
<MentorCalloutCard
imageSrc={mentorGraphic}
imageAlt="HackDavis mentor illustration"
eyebrow="Still Feel Stuck?"
description="No worries, we have a panel of industry mentors who are ready to lend you help at any part of your development process."
note={
<>
<span className="italic">Note:</span> If you have any questions
regarding hackathon events, please contact a{' '}
<a
href="https://discord.gg/Ba5xAtf8"
target="_blank"
rel="noopener noreferrer"
className="underline underline-offset-4"
>
director
</a>
.
</>
}
ctaHref="https://discord.gg/wc6QQEc"
ctaLabel="Contact a mentor"
/>
);
}
Loading
Loading