Merge pull request #105 from UoaWDCC/feat/custom-payload-component

feat: custom payload admin components

Author: vincenttao04

.env.example

@@ -1,3 +1,7 @@
-# Added by Payload
-PAYLOAD_SECRET=97d6832f717898a0943c98f7
-DATABASE_URI=mongodb://localhost:27017/
+PAYLOAD_SECRET=""
+DATABASE_URI=""
+
+S3_ACCESS_KEY_ID=""
+S3_SECRET_ACCESS_KEY=""
+S3_BUCKET=""
+S3_REGION=""

README.md

@@ -7,13 +7,10 @@
 3. make colours/colour variables consistent across website (including logos)
 4. check text uses p, h1, etc. tags for seo
 5. add secondary global font to repo
-6. routing? (with dashes)
-7. add type props to files in /actions
-8. blur when image is rendering
-9. global util file (stringToList, url checker for Media, etc.)
-10. rename header to hero.tsx (so not to be confused with global header)
-11. purge codebase of .env and login details
-12. add notes to custom react component - some links have fallbacks (e.g. constitution/youtube video, etc.)
+6. routing? (with dashes) \*\*
+7. blur when image is rendering
+8. global util file (stringToList, url checker for Media, etc.) \*\*
+9. some links have fallbacks (e.g. constitution/youtube video, etc.) \*
 
 ### BUGS
 
@@ -46,20 +43,6 @@
 5. Go to your browser and enter: "http://localhost:3000"
 6. Any saved changes you make in VS Code will be automatically reflected in localhost:3000
 
-### Add .env file under ausco (root directory)
-
-```
-PAYLOAD_SECRET="a710400222333f83c1b1bd6abb7bd3116e3321f813c48efe8ba93bc75cd16b82"
-DATABASE_URI="mongodb+srv://ausco:[email protected]/"
-```
-
-### Payload admin login
-
-```
-[email protected]
-e1160e47
-```
-
 ## Development
 
 ### How to Start Development

…frontend)/components/concerts/Header.tsx …/(frontend)/components/concerts/Hero.tsxsrc/app/(frontend)/components/concerts/Header.tsx renamed to src/app/(frontend)/components/concerts/Hero.tsx src/app/(frontend)/components/concerts/Header.tsx renamed to src/app/(frontend)/components/concerts/Hero.tsx

@@ -1,9 +1,9 @@
-type HeaderProps = {
+type HeroProps = {
   title: string;
   description?: string;
 };
 
-const Header = ({ title, description }: HeaderProps) => {
+const Hero = ({ title, description }: HeroProps) => {
   return (
     <section className="w-full pb-8 sm:pb-12 md:pb-16 flex flex-col items-center text-center text-(--brown)">
       <h1 className="text-2xl sm:text-3xl md:text-4xl px-6 sm:px-0">{title}</h1>
@@ -14,4 +14,4 @@ const Header = ({ title, description }: HeaderProps) => {
   );
 };
 
-export default Header;
+export default Hero;

…(frontend)/components/gallery/Header.tsx …p/(frontend)/components/gallery/Hero.tsxsrc/app/(frontend)/components/gallery/Header.tsx renamed to src/app/(frontend)/components/gallery/Hero.tsx src/app/(frontend)/components/gallery/Header.tsx renamed to src/app/(frontend)/components/gallery/Hero.tsx

@@ -1,6 +1,6 @@
 type Align = "center" | "left";
 
-type HeaderProps = {
+type HeroProps = {
   title: string;
   align: Align;
 };
@@ -10,14 +10,14 @@ const textDirection: Record<Align, string> = {
   left: "text-left",
 };
 
-const Header = ({ title, align }: HeaderProps) => {
+const Hero = ({ title, align }: HeroProps) => {
   return (
-    <section className="w-full pb-8 sm:pb-12 md:pb-16 flex flex-col items-center text-(--navy)">
+    <section className="flex w-full flex-col items-center pb-8 text-(--navy) sm:pb-12 md:pb-16">
       <div className={`w-full text-center sm:${textDirection[align]} px-6 sm:px-0`}>
         <h1 className="text-2xl sm:text-3xl md:text-4xl">{title}</h1>
       </div>
     </section>
   );
 };
 
-export default Header;
+export default Hero;

src/app/(frontend)/components/home/FeatureVideo.tsx

@@ -11,7 +11,8 @@ type FeatureVideoProps = {
 const FeatureVideo = ({ content }: FeatureVideoProps) => {
   const sectionRef = useRef<HTMLElement | null>(null);
   const videoContainerRef = useRef<HTMLDivElement | null>(null);
-  const [showHeader, setShowHeader] = useState(true); // TODO: maybe safe to remove/hard code showHeader if its a constant
+  // const [showHeader, setShowHeader] = useState(true);
+  const showHeader = true;
   const [maxScale, setMaxScale] = useState<number>(3);
   const [sectionHeight, setSectionHeight] = useState<string>("100vh");
 
@@ -81,12 +82,12 @@ const FeatureVideo = ({ content }: FeatureVideoProps) => {
   return (
     <motion.section
       ref={sectionRef}
-      className="relative flex flex-col items-center justify-center py-8 gap-8 w-full"
+      className="relative flex w-full flex-col items-center justify-center gap-8 py-8"
       style={{ backgroundColor: bgColor, minHeight: sectionHeight }}
     >
       {/* Header */}
       <motion.h2
-        className="w-full max-w-[90vw] text-[2rem] sm:text-[2.7rem] font-bold text-center tracking-tight leading-tight whitespace-nowrap overflow-hidden text-ellipsis relative z-20"
+        className="relative z-20 w-full max-w-[90vw] overflow-hidden text-center text-[2rem] leading-tight font-bold tracking-tight text-ellipsis whitespace-nowrap sm:text-[2.7rem]"
         style={{
           color: "var(--concertblue)",
           opacity: headerOpacity,
@@ -100,13 +101,13 @@ const FeatureVideo = ({ content }: FeatureVideoProps) => {
       {/* Feature Video */}
       <motion.div
         ref={videoContainerRef}
-        className="flex items-center justify-center mx-auto bg-black relative overflow-hidden w-[180px] sm:w-[420px] md:w-[660px] max-w-[100vw] aspect-video z-10"
+        className="relative z-10 mx-auto flex aspect-video w-[180px] max-w-[100vw] items-center justify-center overflow-hidden bg-black sm:w-[420px] md:w-[660px]"
         style={{ scale: scaleValue }}
       >
         <iframe
           loading="lazy"
           src={embedUrl}
-          className="w-full h-full"
+          className="h-full w-full"
           allow="autoplay; fullscreen; encrypted-media"
           allowFullScreen
           title="Past concert video"

…rontend)/components/ourpeople/Header.tsx …(frontend)/components/ourpeople/Hero.tsxsrc/app/(frontend)/components/ourpeople/Header.tsx renamed to src/app/(frontend)/components/ourpeople/Hero.tsx src/app/(frontend)/components/ourpeople/Header.tsx renamed to src/app/(frontend)/components/ourpeople/Hero.tsx

@@ -2,22 +2,22 @@ import Image from "next/image";
 
 import { Media } from "@/payload-types";
 
-type HeaderProps = {
+type HeroProps = {
   content: {
     image: Media | string | null;
     description?: string | null;
   };
 };
 
-const Header = ({ content }: HeaderProps) => {
+const Hero = ({ content }: HeroProps) => {
   return (
     <>
       <section className="relative w-full pb-8 sm:flex sm:flex-row sm:items-center sm:gap-16 sm:pb-12 md:pb-16">
         {typeof content.image === "object" && content.image?.url && (
           <div className="relative h-[22vh] w-full sm:h-[28vh] md:aspect-3/2 md:h-auto md:w-1/2">
             <Image
               src={content.image.url}
-              alt={content.image.alt || "Header Image"}
+              alt={content.image.alt || "Hero Image"}
               fill
               priority
               sizes="(max-width: 640px) 100vw, 50vw"
@@ -44,4 +44,4 @@ const Header = ({ content }: HeaderProps) => {
   );
 };
 
-export default Header;
+export default Hero;

src/app/(frontend)/components/ourstory/Header.tsx

@@ -0,0 +1,16 @@
+type HeroProps = {
+  description?: string | null;
+};
+
+const Hero = ({ description }: HeroProps) => {
+  return (
+    <section className="flex w-full flex-col items-center pb-8 text-left text-(--navy) sm:pb-12 sm:text-center md:pb-16">
+      <h1 className="w-full px-0 text-2xl sm:px-6 sm:text-3xl md:text-4xl">Our Story</h1>
+      {description && (
+        <h3 className="px-0 pt-3 text-sm sm:px-15 md:px-30 md:pt-7 md:text-base">{description}</h3>
+      )}
+    </section>
+  );
+};
+
+export default Hero;

src/app/(frontend)/components/ourstory/Hero.tsx

@@ -1,17 +1,17 @@
 import { getConcerts } from "@/actions/pageActions";
 
-import Header from "@components/concerts/Header";
+import Hero from "@components/concerts/Hero";
 import Card from "@components/concerts/Card";
 
 export default async function Concerts() {
   const content = await getConcerts();
 
   return (
     <section className="bg-(--cream)">
-      <div className="w-full max-w-6xl mx-auto pt-44 pb-8 sm:pb-12 md:pb-16 px-6 flex flex-col items-center">
-        <Header title="Concerts" />
+      <div className="mx-auto flex w-full max-w-6xl flex-col items-center px-6 pt-44 pb-8 sm:pb-12 md:pb-16">
+        <Hero title="Concerts" />
 
-        <div className="flex flex-col sm:flex-row justify-between items-center gap-6 w-full">
+        <div className="flex w-full flex-col items-center justify-between gap-6 sm:flex-row">
           {/* Upcoming Concerts Button */}
           <Card background={content.upcoming} type="upcoming" />
 

src/app/(frontend)/concerts/page.tsx

@@ -1,15 +1,15 @@
 import { getConcertsPast } from "@/actions/pageActions";
 
-import Header from "@components/concerts/Header";
+import Hero from "@components/concerts/Hero";
 import SemesterConcert from "@components/concerts/past/SemesterConcert";
 
 export default async function Past() {
   const content = await getConcertsPast();
 
   return (
     <div className="bg-(--cream)">
-      <div className="max-w-6xl mx-auto px-6 pt-44">
-        <Header title="Past Concerts" description={content.description} />
+      <div className="mx-auto max-w-6xl px-6 pt-44">
+        <Hero title="Past Concerts" description={content.description} />
 
         {/* Past Concerts */}
         <section className="text-left">
@@ -18,19 +18,19 @@ export default async function Past() {
             .map((concert, index) => (
               <div key={index} className="pb-8 sm:pb-12 md:pb-16">
                 {/* Divider */}
-                <div className="hidden lg:block w-full h-px bg-(--brown) mb-16" />
+                <div className="mb-16 hidden h-px w-full bg-(--brown) lg:block" />
 
                 {/* Year */}
-                <h1 className="text-center lg:text-left text-lg sm:text-xl md:text-2xl text-(--brown) pb-3 md:pb-7">
+                <h1 className="pb-3 text-center text-lg text-(--brown) sm:text-xl md:pb-7 md:text-2xl lg:text-left">
                   {concert.year}
                 </h1>
 
                 {/* Concerts - Semester 1 & 2 */}
-                <div className="flex flex-col lg:flex-row gap-4 sm:gap-7 md:gap-9 items-start bg-(--beige) w-full rounded-lg p-4 sm:p-7 md:p-9">
+                <div className="flex w-full flex-col items-start gap-4 rounded-lg bg-(--beige) p-4 sm:gap-7 sm:p-7 md:gap-9 md:p-9 lg:flex-row">
                   <SemesterConcert semester="1" content={concert.semesterOne} />
 
                   <div
-                    className="block lg:hidden w-full bg-(--brown)"
+                    className="block w-full bg-(--brown) lg:hidden"
                     style={{ height: "0.5px" }}
                   />