# UI plan

## links
GitHub: https://github.com/SWEN90013-2021-GN/GN/tree/ui/main
Figma: https://www.figma.com/file/0ynWdjdNmnFlEtKz5uYp8T/digital-prototype?node-id=150%3A179
MaterialUI: https://material-ui.com/components/

## TODO React Component
- [ ] HEADER genyus Roundtable （Eric）
- [ ] Footer （Eric）
- [x] Buttons (chuan)
- [x] Info card (chuan)
- [ ] Text Box
- [x] Gallery - sub header (chuan)
- [ ] Title - not yet
- [ ] FORM - might be assigned to Joel

## Chuan's sprint 2a plan

- [x] Create button component that auto expand based on the size of it's children

// No CSSProperties as props because the styling is dynamically generated
type buttonProps = {
    children?: React.ReactNode,
    disabled?: boolean,
    onClick?(event: React.MouseEvent<HTMLButtonElement>): void,
    fontSize?: number,
}


- [x] Create carousel that hold horses

### Title isn't included in the carousel, I think it should be a seperate component

type horseData = {
    title: string,
    text: string,
    date: Date,
    link: string,
    image?: string // default is "next/public/default-event-image.png"
}

type CarouselProps = {
    data: horseData[],
    columnWidth?: number, // default 300px
}


- [x] Card that contains text (already provided by MaterialUI)

function card(
    title: string, 
    text: string
)