Skip to content

Commit 9a04691

Browse files
Jay PanchalJay Panchal
Jay Panchal
authored and
Jay Panchal
committed
feat: Added InputFiled, PointerCard component, updated Data and its type
1 parent 74daf36 commit 9a04691

File tree

7 files changed

+2145
-132
lines changed

7 files changed

+2145
-132
lines changed

‎src/components/Consultation.tsx

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import React, { useState } from "react";
44
import { twMerge } from "tailwind-merge";
5+
import InputField from "./InputField";
56

67
const cardStyles = {
78
colored: {
@@ -21,46 +22,6 @@ type ConsultationType = {
2122
type?: keyof typeof cardStyles;
2223
};
2324

24-
type InputFieldProps = {
25-
name: string;
26-
type: string;
27-
placeholder: string;
28-
value: string;
29-
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
30-
className?: string;
31-
};
32-
33-
const InputField = ({
34-
name,
35-
type,
36-
placeholder,
37-
value,
38-
onChange,
39-
className,
40-
}: InputFieldProps) => {
41-
return (
42-
<div className="w-full lg:w-6/12 mb-5 pr-5">
43-
<span data-name={name} className="relative block">
44-
<input
45-
name={name}
46-
type={type}
47-
placeholder={placeholder}
48-
value={value}
49-
onChange={onChange}
50-
className={twMerge(
51-
"bg-white/80 w-full focus-visible:ring-0 focus:outline-0 focus:bg-white focus:border-[#86b7fe] focus:shadow text-black rounded-3xl text-sm h-auto py-2 px-5 bg-clip-padding border border-[#dee2e6] placeholder:text-gray-800/75",
52-
className
53-
)}
54-
size={40}
55-
maxLength={400}
56-
aria-required="true"
57-
aria-invalid="false"
58-
/>
59-
</span>
60-
</div>
61-
);
62-
};
63-
6425
const Consultation = ({
6526
backgroundColor,
6627
type = "colored",
@@ -79,7 +40,6 @@ const Consultation = ({
7940

8041
const handleSubmit = (e: React.FormEvent) => {
8142
e.preventDefault();
82-
console.log("Form Submitted", formData);
8343
};
8444

8545
return (
@@ -114,7 +74,7 @@ const Consultation = ({
11474
placeholder={field.placeholder}
11575
value={formData[field.name as keyof typeof formData]}
11676
onChange={handleChange}
117-
className={cardStyles[type].input}
77+
inputClassName={cardStyles[type].input}
11878
/>
11979
))}
12080
<br />

‎src/components/InputField.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { twMerge } from "tailwind-merge";
2+
3+
type InputFieldProps = {
4+
name: string;
5+
type: string;
6+
placeholder: string;
7+
value: string;
8+
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
9+
inputClassName?: string;
10+
className?: string
11+
};
12+
13+
const InputField = ({
14+
name,
15+
type,
16+
placeholder,
17+
value,
18+
onChange,
19+
inputClassName,
20+
className
21+
}: InputFieldProps) => {
22+
return (
23+
<div className={twMerge("w-full lg:w-6/12 mb-5 pr-5", className)}>
24+
<span data-name={name} className="relative block">
25+
<input
26+
name={name}
27+
type={type}
28+
placeholder={placeholder}
29+
value={value}
30+
onChange={onChange}
31+
className={twMerge(
32+
"bg-white/80 w-full focus-visible:ring-0 focus:outline-0 focus:bg-white focus:border-[#86b7fe] focus:shadow text-black rounded-3xl text-sm h-auto py-2 px-5 bg-clip-padding border border-[#dee2e6] placeholder:text-gray-800/75",
33+
inputClassName
34+
)}
35+
size={40}
36+
maxLength={400}
37+
aria-required="true"
38+
aria-invalid="false"
39+
/>
40+
</span>
41+
</div>
42+
);
43+
};
44+
45+
export default InputField

‎src/components/PointerCard.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { PointersType } from "@/data/types";
2+
import React from "react";
3+
import { twMerge } from "tailwind-merge";
4+
5+
type PointerCardProps = {
6+
data: PointersType;
7+
eachElementClassName?: string;
8+
index: number;
9+
headingClassName?: string;
10+
};
11+
12+
const PointerCard = ({ data, eachElementClassName, index, headingClassName }: PointerCardProps) => {
13+
return (
14+
<div
15+
className={twMerge(
16+
"w-full lg:w-[42%] mr-[8%] mb-[5%]",
17+
eachElementClassName
18+
)}
19+
>
20+
<h3
21+
className={twMerge(
22+
"text-gray-400 dot text-7xl font-bold mb-2.5",
23+
data.color
24+
)}
25+
>
26+
{index + 1}
27+
</h3>
28+
<h4 className={twMerge("text-3xl mb-2.5 text-gray-600 font-bold",headingClassName)}>
29+
{data.heading}
30+
</h4>
31+
<p className="text-[#212529]">{data.description}</p>
32+
</div>
33+
);
34+
};
35+
36+
export default PointerCard;

‎src/components/Pointers.tsx

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
2-
import { twMerge } from "tailwind-merge";
32
import { PointersType } from "@/data/types";
3+
import PointerCard from "./PointerCard";
44

55
type PointersProps = {
66
title?: string;
@@ -15,26 +15,12 @@ const Pointers = ({ title, pointers, eachElementClassName }: PointersProps) => {
1515
{title && <h2 className="mb-12">{title}</h2>}
1616
<div className="flex flex-wrap -mb-[5%]">
1717
{pointers.map((data, index) => (
18-
<div
18+
<PointerCard
1919
key={data.heading}
20-
className={twMerge(
21-
"w-full lg:w-[42%] mr-[8%] mb-[5%]",
22-
eachElementClassName
23-
)}
24-
>
25-
<h3
26-
className={twMerge(
27-
"text-gray-400 dot text-7xl font-bold mb-2.5",
28-
data.color
29-
)}
30-
>
31-
{index + 1}
32-
</h3>
33-
<h4 className="text-3xl mb-2.5 text-gray-600 font-bold">
34-
{data.heading}
35-
</h4>
36-
<p className="text-[#212529]">{data.description}</p>
37-
</div>
20+
data={data}
21+
index={index}
22+
eachElementClassName={eachElementClassName}
23+
/>
3824
))}
3925
</div>
4026
</div>

‎src/constants/constant.ts

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,20 +37,29 @@ export const capabilitiesData = [
3737

3838
export const tabs = [
3939
{
40+
id: 'streamlining-crisis-communication-for-enhanced-coordination-effective-response',
41+
date: "August 24, 2023",
4042
name: "Critical Communication",
4143
description:
4244
"Streamlining Crisis Communication for Enhanced Coordination & Effective Response",
43-
href: "https://procedure.tech/case_study/streamlining-crisis-communication-for-enhanced-coordination-effective-response/",
45+
href: "/case_study/streamlining-crisis-communication-for-enhanced-coordination-effective-response/",
4446
bgImage:
4547
"https://procedure.tech/wp-content/uploads/2023/10/home-snooker-plum.webp",
48+
imgSrc:"https://i0.wp.com/procedure.tech/wp-content/uploads/2023/08/plum-case-study.webp?fit=700%2C700&ssl=1",
49+
services:"UI & UX, Process Consulting, Innovation",
4650
},
4751
{
52+
id: 'a-fintech-platform-for-simplifying-bulk-payments-and-reshaping-businesses',
53+
date:"August 24, 2023",
4854
name: "FinTech",
4955
description:
5056
"A FinTech Platform for Simplifying Bulk Payments and Reshaping Businesses",
51-
href: "https://procedure.tech/case_study/a-fintech-platform-for-simplifying-bulk-payments-and-reshaping-businesses/",
57+
href: "/case_study/a-fintech-platform-for-simplifying-bulk-payments-and-reshaping-businesses/",
5258
bgImage:
5359
"https://procedure.tech/wp-content/uploads/2023/10/home-case-study-espn.webp",
60+
imgSrc: "https://i0.wp.com/procedure.tech/wp-content/uploads/2023/08/espn-case-study.webp?fit=700%2C700&ssl=1",
61+
services: "UX & UI, Product Engineering, Process Consulting",
62+
className:"rounded-r-none rounded-bl-full rounded-br-full",
5463
},
5564
];
5665

0 commit comments

Comments
 (0)