Skip to content

Commit c4bed58

Browse files
naveen-bandela-au2naveen-bandela-au2
authored
Merge pull request #13 from zopdev/development
updated the workflow file
2 parents 36ae995 + 4876f5a commit c4bed58

File tree

8 files changed

+562
-26
lines changed

8 files changed

+562
-26
lines changed

‎.github/workflows/kops-deploy-stage.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ on:
66

77
env:
88
APP_NAME: ui-components
9-
NAMESPACE: kops-dev-stg
9+
NAMESPACE: zop-web-stage
1010
CLUSTER_NAME: raramuri-tech
1111
CLUSTER_PROJECT: raramuri-tech
1212
GAR_PROJECT: raramuri-tech

‎nginx.conf‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,24 @@ events {
66
}
77

88
http {
9+
include mime.types;
10+
911
server {
10-
include mime.types;
11-
listen *:8000; # Listen for incoming connections from any interface on port 80
12-
server_name ""; # Don't worry if "Host" HTTP Header is empty or not set
13-
root /usr/share/nginx/html; # serve static files from here
12+
listen *:8000; # Listen for incoming connections from any interface on port 8000
13+
server_name ""; # Allow empty or not set "Host" HTTP Header
14+
root /usr/share/nginx/html; # Serve static files from here
15+
16+
# Redirect `/ui-components` to `/ui-components/`
17+
location = /ui-components {
18+
return 301 $scheme://$host/ui-components/;
19+
}
1420

21+
# Serve the React app under `/ui-components/`
1522
location / {
16-
try_files $uri $uri/ /index.html;
23+
try_files $uri $uri/ /index.html;
1724
}
25+
26+
# Optional health check locations
1827
# location /.well-known/health-check {
1928
# access_log off;
2029
# return 200 "healthy\n";
@@ -26,4 +35,4 @@ http {
2635
# add_header Content-Type text/plain;
2736
# }
2837
}
29-
}
38+
}

‎public/index.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@
66
<!-- <base href="/ui-components/" /> -->
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#000000" />
9-
<meta
10-
name="description"
11-
content="Web site created using create-react-app"
12-
/>
9+
<meta name="description" content="zopdev ui-component library" />
1310
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1411
<!--
1512
manifest.json provides metadata used when your web app is installed on a
@@ -25,7 +22,7 @@
2522
work correctly both with client-side routing and a non-root public URL.
2623
Learn how to configure a non-root public URL by running `npm run build`.
2724
-->
28-
<title>React App</title>
25+
<title>zopdev ui-component</title>
2926
</head>
3027
<body>
3128
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/BlogSection/BlogSection.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import React from "react";
2+
3+
import PropTypes from "prop-types";
4+
5+
function classNames(...classes) {
6+
return classes.filter(Boolean).join(" ");
7+
}
8+
9+
export default function BlogSection({
10+
title,
11+
subtitle,
12+
posts = [],
13+
variants = "grid-image",
14+
orientation = "row",
15+
}) {
16+
const containerClasses = classNames(
17+
"bg-white py-20 sm:py-28",
18+
orientation === "column" ? "max-w-2xl lg:max-w-4xl" : "max-w-7xl"
19+
);
20+
21+
const headerClasses = classNames(
22+
"text-balance text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl",
23+
orientation !== "column" && "text-center"
24+
);
25+
26+
const gridClasses = classNames(
27+
orientation === "column"
28+
? "mt-10 space-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16"
29+
: "mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3",
30+
variants === "grid-text" && "border-t border-gray-200"
31+
);
32+
33+
return (
34+
<div className={containerClasses}>
35+
<div className="mx-auto px-6 lg:px-8">
36+
<div className="mx-auto">
37+
<h2 className={headerClasses}>{title}</h2>
38+
{subtitle && (
39+
<p className="mt-2 text-lg/8 text-gray-600">{subtitle}</p>
40+
)}
41+
</div>
42+
<div className={gridClasses}>
43+
{posts?.map((post) => (
44+
<article
45+
key={post.id}
46+
className={classNames(
47+
variants === "grid-image" && orientation === "column"
48+
? "relative isolate flex flex-col gap-8 lg:flex-row"
49+
: "flex flex-col items-start justify-between"
50+
)}
51+
>
52+
{variants === "grid-image" && (
53+
<div
54+
className={classNames(
55+
orientation === "column"
56+
? "relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-64 lg:shrink-0"
57+
: "relative w-full"
58+
)}
59+
>
60+
<img
61+
alt={post.title}
62+
src={post.imageUrl}
63+
className={classNames(
64+
orientation === "column"
65+
? "absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover"
66+
: "aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2]"
67+
)}
68+
/>
69+
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
70+
</div>
71+
)}
72+
<div className="max-w-xl">
73+
<div className="mt-8 flex items-center gap-x-4 text-xs">
74+
<time dateTime={post.datetime} className="text-gray-500">
75+
{post.date}
76+
</time>
77+
<a
78+
href={post.category.href}
79+
className="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"
80+
>
81+
{post.category.title}
82+
</a>
83+
</div>
84+
<div className="group relative">
85+
<h3 className="mt-3 text-lg/6 font-semibold text-gray-900 group-hover:text-gray-600">
86+
<a href={post.href}>
87+
<span className="absolute inset-0" />
88+
{post.title}
89+
</a>
90+
</h3>
91+
<p className="mt-5 line-clamp-3 text-sm/6 text-gray-600">
92+
{post.description}
93+
</p>
94+
</div>
95+
<div className="relative mt-8 flex items-center gap-x-4">
96+
<img
97+
alt={post.author.name}
98+
src={post.author.imageUrl}
99+
className="h-10 w-10 rounded-full bg-gray-100"
100+
/>
101+
<div className="text-sm/6">
102+
<p className="font-semibold text-gray-900">
103+
<a href={post.author.href}>
104+
<span className="absolute inset-0" />
105+
{post.author.name}
106+
</a>
107+
</p>
108+
<p className="text-gray-600">{post.author.role}</p>
109+
</div>
110+
</div>
111+
</div>
112+
</article>
113+
))}
114+
</div>
115+
</div>
116+
</div>
117+
);
118+
}
119+
120+
BlogSection.propTypes = {
121+
title: PropTypes.string.isRequired,
122+
subtitle: PropTypes.string,
123+
posts: PropTypes.arrayOf(
124+
PropTypes.shape({
125+
id: PropTypes.number.isRequired,
126+
title: PropTypes.string.isRequired,
127+
href: PropTypes.string.isRequired,
128+
description: PropTypes.string.isRequired,
129+
imageUrl: PropTypes.string.isRequired,
130+
date: PropTypes.string.isRequired,
131+
datetime: PropTypes.string.isRequired,
132+
category: PropTypes.shape({
133+
title: PropTypes.string.isRequired,
134+
href: PropTypes.string.isRequired,
135+
}).isRequired,
136+
author: PropTypes.shape({
137+
name: PropTypes.string.isRequired,
138+
role: PropTypes.string.isRequired,
139+
href: PropTypes.string.isRequired,
140+
imageUrl: PropTypes.string.isRequired,
141+
}).isRequired,
142+
})
143+
).isRequired,
144+
variants: PropTypes.oneOf(["grid-image", "grid-text"]),
145+
orientation: PropTypes.oneOf(["row", "column"]),
146+
};
147+
148+
// ImageGrid.defaultProps = {
149+
// subtitle: "",
150+
// variants: "grid-image",
151+
// orientation: "row",
152+
// };

‎src/components/BlogSection/BlogSection.stories.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import BlogSection from "./BlogSection";
2+
import { fn } from "@storybook/test";
3+
4+
export default {
5+
title: "Marketing/BlogSection",
6+
component: BlogSection,
7+
argTypes: {
8+
title: { control: "text" },
9+
subtitle: { control: "text" },
10+
variants: {
11+
control: {
12+
type: "select",
13+
options: ["grid-image", "grid-text"], // Define available options
14+
},
15+
description: "Choose between displaying a grid of images or text.",
16+
},
17+
orientation: {
18+
control: {
19+
type: "select",
20+
options: ["row", "column"], // Define available options
21+
},
22+
description: "Set the layout orientation for the grid.",
23+
},
24+
},
25+
tags: ["autodocs"],
26+
};
27+
28+
const posts = [
29+
{
30+
id: 1,
31+
title: "Boost your conversion rate",
32+
href: "#",
33+
description:
34+
"Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
35+
imageUrl:
36+
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80",
37+
date: "Mar 16, 2020",
38+
datetime: "2020-03-16",
39+
category: { title: "Marketing", href: "#" },
40+
author: {
41+
name: "Michael Foster",
42+
role: "Co-Founder / CTO",
43+
href: "#",
44+
imageUrl:
45+
"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
46+
},
47+
},
48+
{
49+
id: 2,
50+
title: "How to use search engine optimization to drive sales",
51+
href: "#",
52+
description:
53+
"Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.",
54+
imageUrl:
55+
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80",
56+
date: "Mar 10, 2020",
57+
datetime: "2020-03-16",
58+
category: { title: "Sales", href: "#" },
59+
author: {
60+
name: "Michael Foster",
61+
role: "Co-Founder / CTO",
62+
href: "#",
63+
imageUrl:
64+
"https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80",
65+
},
66+
},
67+
{
68+
id: 3,
69+
title: "Boost your conversion rate",
70+
href: "#",
71+
description:
72+
"Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
73+
imageUrl:
74+
"https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270&q=80",
75+
date: "Mar 16, 2020",
76+
datetime: "2020-03-16",
77+
category: { title: "Marketing", href: "#" },
78+
author: {
79+
name: "Michael Foster",
80+
role: "Co-Founder / CTO",
81+
href: "#",
82+
imageUrl:
83+
"https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
84+
},
85+
},
86+
// More posts...
87+
];
88+
89+
export const Primary = {
90+
args: {
91+
title: "From the blog",
92+
subtitle: "Learn how to grow your business with our expert advice.",
93+
posts: posts,
94+
variants: "grid-text",
95+
orientation: "column",
96+
},
97+
};

0 commit comments

Comments
 (0)