Skip to content

Commit 5cf2c8b

Browse files
omid-jfomid-jf
committed
Added photo carousel to the main page
1 parent 5a61f37 commit 5cf2c8b

13 files changed

+1047
-459
lines changed

‎app/globals.css

+69-10
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,6 @@
1616
}
1717
}
1818

19-
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
27-
}
28-
2919
@layer utilities {
3020
.text-balance {
3121
text-wrap: balance;
@@ -46,4 +36,73 @@ header a.logo {
4636
header .main-title {
4737
position: relative;
4838
margin-left: 50px;
39+
}
40+
41+
42+
43+
@layer base {
44+
:root {
45+
--background: 0 0% 100%;
46+
--foreground: 0 0% 3.9%;
47+
--card: 0 0% 100%;
48+
--card-foreground: 0 0% 3.9%;
49+
--popover: 0 0% 100%;
50+
--popover-foreground: 0 0% 3.9%;
51+
--primary: 0 0% 9%;
52+
--primary-foreground: 0 0% 98%;
53+
--secondary: 0 0% 96.1%;
54+
--secondary-foreground: 0 0% 9%;
55+
--muted: 0 0% 96.1%;
56+
--muted-foreground: 0 0% 45.1%;
57+
--accent: 0 0% 96.1%;
58+
--accent-foreground: 0 0% 9%;
59+
--destructive: 0 84.2% 60.2%;
60+
--destructive-foreground: 0 0% 98%;
61+
--border: 0 0% 89.8%;
62+
--input: 0 0% 89.8%;
63+
--ring: 0 0% 3.9%;
64+
--chart-1: 12 76% 61%;
65+
--chart-2: 173 58% 39%;
66+
--chart-3: 197 37% 24%;
67+
--chart-4: 43 74% 66%;
68+
--chart-5: 27 87% 67%;
69+
--radius: 0.5rem;
70+
}
71+
.dark {
72+
--background: 0 0% 3.9%;
73+
--foreground: 0 0% 98%;
74+
--card: 0 0% 3.9%;
75+
--card-foreground: 0 0% 98%;
76+
--popover: 0 0% 3.9%;
77+
--popover-foreground: 0 0% 98%;
78+
--primary: 0 0% 98%;
79+
--primary-foreground: 0 0% 9%;
80+
--secondary: 0 0% 14.9%;
81+
--secondary-foreground: 0 0% 98%;
82+
--muted: 0 0% 14.9%;
83+
--muted-foreground: 0 0% 63.9%;
84+
--accent: 0 0% 14.9%;
85+
--accent-foreground: 0 0% 98%;
86+
--destructive: 0 62.8% 30.6%;
87+
--destructive-foreground: 0 0% 98%;
88+
--border: 0 0% 14.9%;
89+
--input: 0 0% 14.9%;
90+
--ring: 0 0% 83.1%;
91+
--chart-1: 220 70% 50%;
92+
--chart-2: 160 60% 45%;
93+
--chart-3: 30 80% 55%;
94+
--chart-4: 280 65% 60%;
95+
--chart-5: 340 75% 55%;
96+
}
97+
}
98+
99+
100+
101+
@layer base {
102+
* {
103+
@apply border-border;
104+
}
105+
body {
106+
@apply bg-background text-foreground;
107+
}
49108
}

‎app/page.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
import PhotosComp from "@/components/Photos"
2+
import { photosData } from "@/lib/photos"
3+
14
export default function Home() {
25
return (
36
<>
47
<div className="text-center pb-3">
58
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">About</h2>
69
</div>
7-
<p className="text-left text-gray-800">We are interested in conducting clinical epidemiology and health services research using big data, ranging from administrative claims database from public and private payers to electronic health records (EHR) from multiple U.S. hospital systems.</p>
10+
<p className="text-left pb-3 text-gray-800">We are interested in conducting clinical epidemiology and health services research using big data, ranging from administrative claims database from public and private payers to electronic health records (EHR) from multiple U.S. hospital systems.</p>
11+
<div className="flex justify-center">
12+
<PhotosComp photosData={ photosData } />
13+
</div>
814
</>
915
);
1016
}

‎components.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎components/Photos.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
"use client"
2+
3+
import Image from "next/image"
4+
import { StaticImageData } from "next/image";
5+
import * as React from "react"
6+
import Autoplay from "embla-carousel-autoplay"
7+
import { Card, CardContent, CardFooter } from "@/components/ui/card"
8+
import {
9+
Carousel,
10+
CarouselContent,
11+
CarouselItem,
12+
CarouselNext,
13+
CarouselPrevious,
14+
} from "@/components/ui/carousel"
15+
16+
interface PhotosProps {
17+
photosData: {
18+
description: string,
19+
imageUrl: string | StaticImageData,
20+
}[];
21+
}
22+
23+
export default function PhotosComp({ photosData }: PhotosProps) {
24+
const plugin = React.useRef(
25+
Autoplay({ delay: 2000, stopOnInteraction: true })
26+
)
27+
28+
return (
29+
<Carousel
30+
plugins={[plugin.current]}
31+
className="w-full max-w-3xl"
32+
onMouseEnter={plugin.current.stop}
33+
onMouseLeave={plugin.current.reset}
34+
>
35+
<CarouselContent>
36+
{photosData.map((photo, index) => (
37+
<CarouselItem key={index}>
38+
<div className="p-1">
39+
<Card>
40+
<CardContent className="flex aspect-square items-center justify-center p-6">
41+
<Image className="self-center flex-shrink-0 -mt-12 bg-center bg-cover bg-gray-500 fill shadow-md" src={photo.imageUrl} alt="" />
42+
</CardContent>
43+
<CardFooter className="flex justify-center">
44+
<p>{photo.description}</p>
45+
</CardFooter>
46+
</Card>
47+
</div>
48+
</CarouselItem>
49+
))}
50+
</CarouselContent>
51+
<CarouselPrevious />
52+
<CarouselNext />
53+
</Carousel>
54+
);
55+
}

‎components/ui/button.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
4+
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9+
{
10+
variants: {
11+
variant: {
12+
default:
13+
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
14+
destructive:
15+
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16+
outline:
17+
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18+
secondary:
19+
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20+
ghost: "hover:bg-accent hover:text-accent-foreground",
21+
link: "text-primary underline-offset-4 hover:underline",
22+
},
23+
size: {
24+
default: "h-9 px-4 py-2",
25+
sm: "h-8 rounded-md px-3 text-xs",
26+
lg: "h-10 rounded-md px-8",
27+
icon: "h-9 w-9",
28+
},
29+
},
30+
defaultVariants: {
31+
variant: "default",
32+
size: "default",
33+
},
34+
}
35+
)
36+
37+
export interface ButtonProps
38+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39+
VariantProps<typeof buttonVariants> {
40+
asChild?: boolean
41+
}
42+
43+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44+
({ className, variant, size, asChild = false, ...props }, ref) => {
45+
const Comp = asChild ? Slot : "button"
46+
return (
47+
<Comp
48+
className={cn(buttonVariants({ variant, size, className }))}
49+
ref={ref}
50+
{...props}
51+
/>
52+
)
53+
}
54+
)
55+
Button.displayName = "Button"
56+
57+
export { Button, buttonVariants }

‎components/ui/card.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-xl border bg-card text-card-foreground shadow",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLDivElement,
34+
React.HTMLAttributes<HTMLDivElement>
35+
>(({ className, ...props }, ref) => (
36+
<div
37+
ref={ref}
38+
className={cn("font-semibold leading-none tracking-tight", className)}
39+
{...props}
40+
/>
41+
))
42+
CardTitle.displayName = "CardTitle"
43+
44+
const CardDescription = React.forwardRef<
45+
HTMLDivElement,
46+
React.HTMLAttributes<HTMLDivElement>
47+
>(({ className, ...props }, ref) => (
48+
<div
49+
ref={ref}
50+
className={cn("text-sm text-muted-foreground", className)}
51+
{...props}
52+
/>
53+
))
54+
CardDescription.displayName = "CardDescription"
55+
56+
const CardContent = React.forwardRef<
57+
HTMLDivElement,
58+
React.HTMLAttributes<HTMLDivElement>
59+
>(({ className, ...props }, ref) => (
60+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61+
))
62+
CardContent.displayName = "CardContent"
63+
64+
const CardFooter = React.forwardRef<
65+
HTMLDivElement,
66+
React.HTMLAttributes<HTMLDivElement>
67+
>(({ className, ...props }, ref) => (
68+
<div
69+
ref={ref}
70+
className={cn("flex items-center p-6 pt-0", className)}
71+
{...props}
72+
/>
73+
))
74+
CardFooter.displayName = "CardFooter"
75+
76+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

0 commit comments

Comments
 (0)