From cea3d5f4328b83035c0ab242e3d57fff046e9967 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sun, 10 Nov 2024 00:16:35 -0500 Subject: [PATCH 01/15] Adding prismic integration --- app/routes/projects.tsx | 50 ++-- types.generated.ts | 588 +++++++++++++++++++++++++++++----------- 2 files changed, 456 insertions(+), 182 deletions(-) diff --git a/app/routes/projects.tsx b/app/routes/projects.tsx index 2df96c9..651ee8b 100644 --- a/app/routes/projects.tsx +++ b/app/routes/projects.tsx @@ -1,5 +1,8 @@ -import { MetaFunction } from "@remix-run/react"; +import { asImageSrc, asLink, asText } from "@prismicio/client"; +import { MetaFunction, useLoaderData } from "@remix-run/react"; +import { ProjectDocument } from "types.generated"; import ProjectsCarousel from "~/components/projects/projects-carousel"; +import { getPrismicClient } from "~/utils/prismicio"; export const meta: MetaFunction = () => { return [ @@ -8,38 +11,27 @@ export const meta: MetaFunction = () => { ]; }; -const exProjectsList = [ - { - image: "https://i.imgur.com/1D8yxOo.gif", - title: "Lucy's Love Bus", - subtitle: "Practitioner Search Directory", - description: - "Lucy’s Love Bus improves quality of life for children with cancer or other life-threatening illnesses with integrative therapies like massage, meditation, acupuncture, music therapy, and therapeutic horseback riding. Integrative therapies ease children’s pain and anxiety during and after traditional medical... treatments. We are building an open search directory to allow families across New England to find integrative therapists in their area.", - link: "https://en.wikipedia.org/wiki/Sirocco_(parrot)", - }, - { - image: "https://i.imgur.com/F4IOuav.jpeg", - title: "Speak For The Trees", - subtitle: "Tree Stewardship System", - description: - "Speak for the Trees Boston aims to improve the size and health of the urban forest in the greater Boston area, with a focus on under-served and under-canopied neighborhoods. They work with volunteers to inventory (collect data on) trees, plant trees, and educate those about trees...", - link: "https://en.wikipedia.org/wiki/Sirocco_(parrot)", - }, - { - image: "https://i.imgur.com/1D8yxOo.gif", - title: "This Star Won't Go Out", - subtitle: "Grant Application System", - description: - "Since its founding in 2011, This Star Won’t Go Out has helped hundreds of families, with gifts totaling over $450,000 to help families suffering from financial hardship related to childhood cancer. We're helping to streamline this system so that TSWGO can focus their attention on helping families.", - link: "https://en.wikipedia.org/wiki/Sirocco_(parrot)", - }, - {}, -]; +export const loader = async () => { + const client = await getPrismicClient(); + + return await client.getSingle("project"); +}; export default function Projects() { + const document = useLoaderData(); + const projects = document.data.project; + + const projectsList = projects.map((project) => ({ + image: asImageSrc(project.image) ?? undefined, + title: asText(project.title), + subtitle: asText(project.subtitle), + description: asText(project.description), + link: asLink(project.link) ?? undefined, + })); + return (
- +
); } diff --git a/types.generated.ts b/types.generated.ts index 217b09c..291ca3e 100644 --- a/types.generated.ts +++ b/types.generated.ts @@ -4,95 +4,295 @@ import type * as prismic from "@prismicio/client"; type Simplify = { [KeyType in keyof T]: T[KeyType] }; +/** + * Content for About-CDE documents + */ +interface AboutDocumentData { + /** + * cde-title field in *About-CDE* + * + * - **Field Type**: Title + * - **Placeholder**: Lorem + * - **API ID Path**: about.title + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + title: prismic.TitleField; + + /** + * image field in *About-CDE* + * + * - **Field Type**: Image + * - **Placeholder**: *None* + * - **API ID Path**: about.cd-image + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#image + */ + "cd-image": prismic.ImageField; + + /** + * description field in *About-CDE* + * + * - **Field Type**: Rich Text + * - **Placeholder**: Lorem ipsum dolor sit amet consectetur. Elementum nisl proin volutpat non purus. + * - **API ID Path**: about.description + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + description: prismic.RichTextField; +} + +/** + * About-CDE document from Prismic + * + * - **API ID**: `about` + * - **Repeatable**: `false` + * - **Documentation**: https://prismic.io/docs/custom-types + * + * @typeParam Lang - Language API ID of the document. + */ +export type AboutDocument = prismic.PrismicDocumentWithoutUID, "about", Lang>; + +/** + * Item in *About-CDE → events* + */ +export interface AboutCdeDocumentDataEventsItem { + /** + * image field in *About-CDE → events* + * + * - **Field Type**: Image + * - **Placeholder**: *None* + * - **API ID Path**: about-cde.events[].image + * - **Documentation**: https://prismic.io/docs/field#image + */ + image: prismic.ImageField; + + /** + * title field in *About-CDE → events* + * + * - **Field Type**: Title + * - **Placeholder**: Lorem + * - **API ID Path**: about-cde.events[].title + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + title: prismic.TitleField; + + /** + * description field in *About-CDE → events* + * + * - **Field Type**: Rich Text + * - **Placeholder**: Lorem ipsum dolor sit amet consectetur. Elementum nisl proin volutpat non purus. + * - **API ID Path**: about-cde.events[].description + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + description: prismic.RichTextField; +} + +/** + * Content for About-CDE documents + */ +interface AboutCdeDocumentData { + /** + * events field in *About-CDE* + * + * - **Field Type**: Group + * - **Placeholder**: *None* + * - **API ID Path**: about-cde.events[] + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#group + */ + events: prismic.GroupField>; +} + +/** + * About-CDE document from Prismic + * + * - **API ID**: `about-cde` + * - **Repeatable**: `false` + * - **Documentation**: https://prismic.io/docs/custom-types + * + * @typeParam Lang - Language API ID of the document. + */ +export type AboutCdeDocument = prismic.PrismicDocumentWithoutUID, "about-cde", Lang>; + +/** + * Item in *About-PDE → events* + */ +export interface AboutPdeDocumentDataEventsItem { + /** + * pde-title field in *About-PDE → events* + * + * - **Field Type**: Title + * - **Placeholder**: Lorem + * - **API ID Path**: about-pde.events[].title + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + title: prismic.TitleField; + + /** + * image field in *About-PDE → events* + * + * - **Field Type**: Image + * - **Placeholder**: *None* + * - **API ID Path**: about-pde.events[].image + * - **Documentation**: https://prismic.io/docs/field#image + */ + image: prismic.ImageField; + + /** + * description field in *About-PDE → events* + * + * - **Field Type**: Rich Text + * - **Placeholder**: Lorem ipsum dolor sit amet consectetur. Elementum nisl proin volutpat non purus. + * - **API ID Path**: about-pde.events[].description + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + description: prismic.RichTextField; +} + +/** + * Content for About-PDE documents + */ +interface AboutPdeDocumentData { + /** + * events field in *About-PDE* + * + * - **Field Type**: Group + * - **Placeholder**: *None* + * - **API ID Path**: about-pde.events[] + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#group + */ + events: prismic.GroupField>; +} + +/** + * About-PDE document from Prismic + * + * - **API ID**: `about-pde` + * - **Repeatable**: `false` + * - **Documentation**: https://prismic.io/docs/custom-types + * + * @typeParam Lang - Language API ID of the document. + */ +export type AboutPdeDocument = prismic.PrismicDocumentWithoutUID, "about-pde", Lang>; + +/** + * Content for event documents + */ +interface EventDocumentData { + /** + * adssa field in *event* + * + * - **Field Type**: Title + * - **Placeholder**: *None* + * - **API ID Path**: event.adssa + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + adssa: prismic.TitleField; +} + +/** + * event document from Prismic + * + * - **API ID**: `event` + * - **Repeatable**: `true` + * - **Documentation**: https://prismic.io/docs/custom-types + * + * @typeParam Lang - Language API ID of the document. + */ +export type EventDocument = prismic.PrismicDocumentWithoutUID, "event", Lang>; + /** * Item in *People → people* */ export interface PeopleDocumentDataPeopleItem { - /** - * headshot field in *People → people* - * - * - **Field Type**: Image - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].headshot - * - **Documentation**: https://prismic.io/docs/field#image - */ - headshot: prismic.ImageField; - - /** - * name field in *People → people* - * - * - **Field Type**: Title - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].name - * - **Documentation**: https://prismic.io/docs/field#rich-text-title - */ - name: prismic.TitleField; - - /** - * role field in *People → people* - * - * - **Field Type**: Rich Text - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].role - * - **Documentation**: https://prismic.io/docs/field#rich-text-title - */ - role: prismic.RichTextField; - - /** - * email field in *People → people* - * - * - **Field Type**: Rich Text - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].email - * - **Documentation**: https://prismic.io/docs/field#rich-text-title - */ - email: prismic.RichTextField; - - /** - * github field in *People → people* - * - * - **Field Type**: Embed - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].github - * - **Documentation**: https://prismic.io/docs/field#embed - */ - github: prismic.EmbedField; - - /** - * linkedin field in *People → people* - * - * - **Field Type**: Embed - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].linkedin - * - **Documentation**: https://prismic.io/docs/field#embed - */ - linkedin: prismic.EmbedField; - - /** - * website field in *People → people* - * - * - **Field Type**: Embed - * - **Placeholder**: *None* - * - **API ID Path**: people.people[].website - * - **Documentation**: https://prismic.io/docs/field#embed - */ - website: prismic.EmbedField; + /** + * headshot field in *People → people* + * + * - **Field Type**: Image + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].headshot + * - **Documentation**: https://prismic.io/docs/field#image + */ + headshot: prismic.ImageField; + + /** + * name field in *People → people* + * + * - **Field Type**: Title + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].name + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + name: prismic.TitleField; + + /** + * role field in *People → people* + * + * - **Field Type**: Rich Text + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].role + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + role: prismic.RichTextField; + + /** + * email field in *People → people* + * + * - **Field Type**: Rich Text + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].email + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + email: prismic.RichTextField; + + /** + * github field in *People → people* + * + * - **Field Type**: Embed + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].github + * - **Documentation**: https://prismic.io/docs/field#embed + */ + github: prismic.EmbedField + + /** + * linkedin field in *People → people* + * + * - **Field Type**: Embed + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].linkedin + * - **Documentation**: https://prismic.io/docs/field#embed + */ + linkedin: prismic.EmbedField + + /** + * website field in *People → people* + * + * - **Field Type**: Embed + * - **Placeholder**: *None* + * - **API ID Path**: people.people[].website + * - **Documentation**: https://prismic.io/docs/field#embed + */ + website: prismic.EmbedField } /** * Content for People documents */ interface PeopleDocumentData { - /** - * people field in *People* - * - * - **Field Type**: Group - * - **Placeholder**: *None* - * - **API ID Path**: people.people[] - * - **Tab**: Main - * - **Documentation**: https://prismic.io/docs/field#group - */ - people: prismic.GroupField>; + /** + * people field in *People* + * + * - **Field Type**: Group + * - **Placeholder**: *None* + * - **API ID Path**: people.people[] + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#group + */ + people: prismic.GroupField>; } /** @@ -104,60 +304,55 @@ interface PeopleDocumentData { * * @typeParam Lang - Language API ID of the document. */ -export type PeopleDocument = - prismic.PrismicDocumentWithoutUID< - Simplify, - "people", - Lang - >; +export type PeopleDocument = prismic.PrismicDocumentWithoutUID, "people", Lang>; /** * Content for Person documents */ interface PersonDocumentData { - /** - * Headshot field in *Person* - * - * - **Field Type**: Image - * - **Placeholder**: *None* - * - **API ID Path**: person.headshot - * - **Tab**: Main - * - **Documentation**: https://prismic.io/docs/field#image - */ - headshot: prismic.ImageField; - - /** - * Name field in *Person* - * - * - **Field Type**: Title - * - **Placeholder**: *None* - * - **API ID Path**: person.name - * - **Tab**: Main - * - **Documentation**: https://prismic.io/docs/field#rich-text-title - */ - name: prismic.TitleField; - - /** - * role field in *Person* - * - * - **Field Type**: Title - * - **Placeholder**: *None* - * - **API ID Path**: person.role - * - **Tab**: Main - * - **Documentation**: https://prismic.io/docs/field#rich-text-title - */ - role: prismic.TitleField; - - /** - * github field in *Person* - * - * - **Field Type**: Embed - * - **Placeholder**: *None* - * - **API ID Path**: person.github - * - **Tab**: Main - * - **Documentation**: https://prismic.io/docs/field#embed - */ - github: prismic.EmbedField; + /** + * Headshot field in *Person* + * + * - **Field Type**: Image + * - **Placeholder**: *None* + * - **API ID Path**: person.headshot + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#image + */ + headshot: prismic.ImageField; + + /** + * Name field in *Person* + * + * - **Field Type**: Title + * - **Placeholder**: *None* + * - **API ID Path**: person.name + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + name: prismic.TitleField; + + /** + * role field in *Person* + * + * - **Field Type**: Title + * - **Placeholder**: *None* + * - **API ID Path**: person.role + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + role: prismic.TitleField; + + /** + * github field in *Person* + * + * - **Field Type**: Embed + * - **Placeholder**: *None* + * - **API ID Path**: person.github + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#embed + */ + github: prismic.EmbedField } /** @@ -169,31 +364,118 @@ interface PersonDocumentData { * * @typeParam Lang - Language API ID of the document. */ -export type PersonDocument = - prismic.PrismicDocumentWithoutUID< - Simplify, - "person", - Lang - >; +export type PersonDocument = prismic.PrismicDocumentWithoutUID, "person", Lang>; -export type AllDocumentTypes = PeopleDocument | PersonDocument; +/** + * Item in *Project → Project* + */ +export interface ProjectDocumentDataProjectItem { + /** + * Image field in *Project → Project* + * + * - **Field Type**: Image + * - **Placeholder**: *None* + * - **API ID Path**: project.project[].image + * - **Documentation**: https://prismic.io/docs/field#image + */ + image: prismic.ImageField; + + /** + * Title field in *Project → Project* + * + * - **Field Type**: Title + * - **Placeholder**: Speak For The Trees + * - **API ID Path**: project.project[].title + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + title: prismic.TitleField; + + /** + * Subtitle field in *Project → Project* + * + * - **Field Type**: Rich Text + * - **Placeholder**: Tree Stewardship Program + * - **API ID Path**: project.project[].subtitle + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + subtitle: prismic.RichTextField; + + /** + * Description field in *Project → Project* + * + * - **Field Type**: Rich Text + * - **Placeholder**: Speak for the Trees Boston aims to improve the size and health of the urban forest in the greater Boston area, with a focus on under-served and under-canopied neighborhoods. They work with volunteers to inventory (collect data on) trees, plant trees, and educate those about trees... + * - **API ID Path**: project.project[].description + * - **Documentation**: https://prismic.io/docs/field#rich-text-title + */ + description: prismic.RichTextField; + + /** + * Link field in *Project → Project* + * + * - **Field Type**: Link + * - **Placeholder**: *None* + * - **API ID Path**: project.project[].link + * - **Documentation**: https://prismic.io/docs/field#link-content-relationship + */ + link: prismic.LinkField; +} -declare module "@prismicio/client" { - interface CreateClient { - ( - repositoryNameOrEndpoint: string, - options?: prismic.ClientConfig, - ): prismic.Client; - } - - namespace Content { - export type { - PeopleDocument, - PeopleDocumentData, - PeopleDocumentDataPeopleItem, - PersonDocument, - PersonDocumentData, - AllDocumentTypes, - }; - } +/** + * Content for Project documents + */ +interface ProjectDocumentData { + /** + * Project field in *Project* + * + * - **Field Type**: Group + * - **Placeholder**: *None* + * - **API ID Path**: project.project[] + * - **Tab**: Main + * - **Documentation**: https://prismic.io/docs/field#group + */ + project: prismic.GroupField>; } + +/** + * Project document from Prismic + * + * - **API ID**: `project` + * - **Repeatable**: `false` + * - **Documentation**: https://prismic.io/docs/custom-types + * + * @typeParam Lang - Language API ID of the document. + */ +export type ProjectDocument = prismic.PrismicDocumentWithoutUID, "project", Lang>; + +export type AllDocumentTypes = AboutDocument | AboutCdeDocument | AboutPdeDocument | EventDocument | PeopleDocument | PersonDocument | ProjectDocument; + +declare module "@prismicio/client" { + interface CreateClient { + (repositoryNameOrEndpoint: string, options?: prismic.ClientConfig): prismic.Client; + } + + namespace Content { + export type { + AboutDocument, + AboutDocumentData, + AboutCdeDocument, + AboutCdeDocumentData, + AboutCdeDocumentDataEventsItem, + AboutPdeDocument, + AboutPdeDocumentData, + AboutPdeDocumentDataEventsItem, + EventDocument, + EventDocumentData, + PeopleDocument, + PeopleDocumentData, + PeopleDocumentDataPeopleItem, + PersonDocument, + PersonDocumentData, + ProjectDocument, + ProjectDocumentData, + ProjectDocumentDataProjectItem, + AllDocumentTypes + } + } +} \ No newline at end of file From b4422a38beb7cac20623962fbcfbf6af03dc43de Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Sat, 16 Nov 2024 00:41:27 -0500 Subject: [PATCH 02/15] Working on styling --- app/components/projects/project.tsx | 42 ++++++++++++------- app/components/projects/projects-carousel.tsx | 12 +++--- app/components/projects/projects-page.tsx | 19 +++++++++ app/components/ui/carousel.tsx | 35 ++++++++++------ app/routes/projects.tsx | 4 +- 5 files changed, 78 insertions(+), 34 deletions(-) create mode 100644 app/components/projects/projects-page.tsx diff --git a/app/components/projects/project.tsx b/app/components/projects/project.tsx index 172a5f0..dc7ed7d 100644 --- a/app/components/projects/project.tsx +++ b/app/components/projects/project.tsx @@ -14,25 +14,37 @@ const Project = ({ link, }: ProjectProps) => { return ( -
+
{title} -

{title ?? "Project Title"}

-

- {subtitle ?? "Project Subtitle"} -

-

- {description ?? "Project Description"} -

-
- {link && ( - - - - )} +
+
+
+ {title || "Title"} +
+
+ {subtitle || "Project Subtitle"} +
+
+
+ {description || "Project Description"} +
+
+ {link && ( + + )} +
); diff --git a/app/components/projects/projects-carousel.tsx b/app/components/projects/projects-carousel.tsx index 5c92aed..652d80d 100644 --- a/app/components/projects/projects-carousel.tsx +++ b/app/components/projects/projects-carousel.tsx @@ -8,17 +8,17 @@ import { } from "../ui/carousel"; import Project, { ProjectProps } from "./project"; -interface ProjectsCarouselProps { +export interface ProjectsCarouselProps { projects: ProjectProps[]; } const ProjectsCarousel = ({ projects }: ProjectsCarouselProps) => { return ( -
- +
+ {projects.map((project, index) => ( - + { ))} - +
+ +
diff --git a/app/components/projects/projects-page.tsx b/app/components/projects/projects-page.tsx new file mode 100644 index 0000000..dd77093 --- /dev/null +++ b/app/components/projects/projects-page.tsx @@ -0,0 +1,19 @@ +import ProjectsCarousel, { ProjectsCarouselProps } from "./projects-carousel"; + +const ProjectsPage = ({ projects }: ProjectsCarouselProps) => { + return ( +
+
+

+ Projects +

+

+ Take a look at some of the work we've done! +

+
+ +
+ ); +}; + +export default ProjectsPage; diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx index aa2e486..cfc928e 100644 --- a/app/components/ui/carousel.tsx +++ b/app/components/ui/carousel.tsx @@ -205,17 +205,21 @@ const CarouselPrevious = React.forwardRef< variant={variant} size={size} className={cn( - "absolute h-8 w-8 rounded-full", + "absolute h-8 w-8 rounded-full border-0 overflow-visible shadow-none", orientation === "horizontal" - ? "-left-12 top-1/2 -translate-y-1/2" - : "-top-12 left-1/2 -translate-x-1/2 rotate-90", + ? "-left-12 top-1/2 -translate-y-1/2 -ml-8" + : "-top-12 left-1/2 -translate-x-1/2 rotate-90 -mt-8", className, )} disabled={!canScrollPrev} onClick={scrollPrev} {...props} > - + + Previous slide ); @@ -234,17 +238,21 @@ const CarouselNext = React.forwardRef< variant={variant} size={size} className={cn( - "absolute h-8 w-8 rounded-full", + "absolute h-8 w-8 rounded-full border-0 overflow-visible shadow-none", orientation === "horizontal" - ? "-right-12 top-1/2 -translate-y-1/2" - : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", + ? "-right-12 top-1/2 -translate-y-1/2 -mr-8" + : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 -mb-8", className, )} disabled={!canScrollNext} onClick={scrollNext} {...props} > - + + Next slide ); @@ -279,14 +287,17 @@ const CarouselDots = React.forwardRef< if (numberOfSlides > 1) { return ( -
+
{Array.from({ length: numberOfSlides }, (_, i) => (
- {description ?? "Description"} + {introduction ?? "Introduction"}
@@ -71,16 +74,12 @@ const Case = ({ case: caseData }: { case: CaseProps }) => {
- - +
+ +
+
+ +
{
Launch Live Website diff --git a/app/components/projects/project.tsx b/app/components/projects/project.tsx index dc7ed7d..a06ba8b 100644 --- a/app/components/projects/project.tsx +++ b/app/components/projects/project.tsx @@ -1,47 +1,56 @@ export interface ProjectProps { - image?: string; + logo?: string; title?: string; subtitle?: string; description?: string; link?: string; + has_case?: boolean; } const Project = ({ - image, + logo, title, subtitle, description, link, + has_case, }: ProjectProps) => { return ( -
- {title} -
-
-
- {title || "Title"} +
+
+ {title} +
+
+
+ {title || "Title"} +
+
+ {subtitle || "Project Subtitle"} +
-
- {subtitle || "Project Subtitle"} +
+ {description || "Project Description"}
-
- {description || "Project Description"} -
-
+
{link && ( - diff --git a/app/components/projects/projects-carousel.tsx b/app/components/projects/projects-carousel.tsx index 652d80d..9f8cf57 100644 --- a/app/components/projects/projects-carousel.tsx +++ b/app/components/projects/projects-carousel.tsx @@ -14,17 +14,18 @@ export interface ProjectsCarouselProps { const ProjectsCarousel = ({ projects }: ProjectsCarouselProps) => { return ( -
+
{projects.map((project, index) => ( ))} @@ -33,7 +34,7 @@ const ProjectsCarousel = ({ projects }: ProjectsCarouselProps) => {
- +
); diff --git a/app/components/projects/projects-page.tsx b/app/components/projects/projects-page.tsx deleted file mode 100644 index dd77093..0000000 --- a/app/components/projects/projects-page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import ProjectsCarousel, { ProjectsCarouselProps } from "./projects-carousel"; - -const ProjectsPage = ({ projects }: ProjectsCarouselProps) => { - return ( -
-
-

- Projects -

-

- Take a look at some of the work we've done! -

-
- -
- ); -}; - -export default ProjectsPage; diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx index cfc928e..0cc456b 100644 --- a/app/components/ui/carousel.tsx +++ b/app/components/ui/carousel.tsx @@ -289,7 +289,7 @@ const CarouselDots = React.forwardRef< return (
{Array.from({ length: numberOfSlides }, (_, i) => ( + + )}
); diff --git a/app/components/projects/project.tsx b/app/components/projects/project.tsx index a06ba8b..f9b05a3 100644 --- a/app/components/projects/project.tsx +++ b/app/components/projects/project.tsx @@ -38,20 +38,16 @@ const Project = ({
{link && ( - + View Case Study + )}
From 4253a45166bcfc0bb9d0e09b58fe7f1a1fb263e3 Mon Sep 17 00:00:00 2001 From: Jane Kamata Date: Thu, 5 Dec 2024 18:22:11 -0500 Subject: [PATCH 05/15] Adding arrow on case --- app/components/footer/footer.tsx | 2 +- app/components/icons/OpenLink.tsx | 18 +++++++++++ app/components/icons/index.ts | 1 + app/components/projects/case.tsx | 28 +++++++++++----- app/components/projects/projects-carousel.tsx | 2 +- app/icons/OpenLink.svg | 3 ++ app/routes/case.$caseId.tsx | 8 ++++- app/routes/projects.tsx | 32 +++++++++++-------- 8 files changed, 69 insertions(+), 25 deletions(-) create mode 100644 app/components/icons/OpenLink.tsx create mode 100644 app/icons/OpenLink.svg diff --git a/app/components/footer/footer.tsx b/app/components/footer/footer.tsx index ccc087a..351b442 100644 --- a/app/components/footer/footer.tsx +++ b/app/components/footer/footer.tsx @@ -2,7 +2,7 @@ import MailingList from "./mailing-list"; export default function Footer() { return ( -