added ci github workflow

.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: CI/CD Pipeline
+
+on: 
+    push:
+        branches:
+            - add_ci_and_linting
+    pull_request: 
+        types: [opened, reopened]         
+        branches:
+            - master
+
+jobs:
+  black:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v3
+        with:
+          python-version: '3.x'
+      - name: Install dependencies
+        run: |
+          pip install black
+      - name: Run Black
+        run: |
+          black --check .
+
+
+
+

README.md

@@ -1,3 +1,6 @@
+### This is a project of SF Civic Tech [https://www.sfcivictech.org/](https://www.sfcivictech.org/)
+
+
 <p align="center">
   <a href="https://nextjs-fastapi-starter.vercel.app/">
     <img src="https://assets.vercel.com/image/upload/v1588805858/repositories/vercel/logo.png" height="96">
@@ -120,4 +123,4 @@ The file is organized into three main sections:
 
 ***
 # Disclaimer
-Some versions of this code contain a streamlit app that uses an imprecise measure which may introduce errors in the output. The streamlit app should not be relied upon to determine any property’s safety or compliance with the soft story program. Please consult DataSF for most up to date information.
+#### Some versions of this code contain a streamlit app that uses an imprecise measure which may introduce errors in the output. The streamlit app should not be relied upon to determine any property’s safety or compliance with the soft story program. Please consult DataSF for most up to date information.

app/components-test-lib/page.tsx

@@ -1,59 +1,39 @@
 "use client";
 
-import { Box, Heading, VStack, useToast, Text, HStack } from "@chakra-ui/react";
-import MockButton from "../components/mock-button";
+import { Box, Heading, VStack, Text, HStack, Divider } from "@chakra-ui/react";
+import SearchBar from "../components/search-bar";
 
 const ComponentsTestLib = () => {
-  const toast = useToast();
-
-  const showToast = (message: string) => {
-    toast({
-      title: "Action Successful.",
-      description: message,
-      status: "success",
-      duration: 5000,
-      isClosable: true,
-    });
-  };
-
   return (
-    <Box as="section" p="8">
-      <Heading as="h1" size="xl" mb={6}>
+    <Box
+      as="section"
+      w={{ base: "base", xl: "xl" }}
+      p={{
+        base: "10px 23px 10px 23px",
+        md: "8px 27px 8px 26px",
+        xl: "5px 127px 5px 127px",
+      }}
+      m="auto"
+    >
+      <Heading as="h1" size="xl" mb={4} color="blue">
         Components Test Library
       </Heading>
-      <Heading as="h2" size="md" mb={4}>
-        Button Variants
+      <Divider mb={2} />
+      <Heading as="h2" size="md" mb={2}>
+        Search Bar
       </Heading>
       <Text mb={4}>
-        This section demonstrates different states of the Button component
+        This section demonstrates different states of the Search Bar component
       </Text>
-      <HStack spacing={4} align="center">
-        <VStack>
+      <VStack spacing={4} align="start">
+        <HStack w="100%">
           <Heading as="h3" size="sm">
             Default
           </Heading>
-          <MockButton
-            label="Default"
-            onClick={() => showToast("Default Button Clicked")}
-          />
-        </VStack>
-        <VStack>
-          <Heading as="h3" size="sm">
-            Disabled
-          </Heading>
-          <MockButton label="Disabled" onClick={() => {}} disabled={true} />
-        </VStack>
-        <VStack>
-          <Heading as="h3" size="sm">
-            Loading
-          </Heading>
-          <MockButton
-            label="Loading..."
-            onClick={() => showToast("Loading Button Clicked")}
-            isLoading={true}
-          />
-        </VStack>
-      </HStack>
+          <SearchBar />
+        </HStack>
+        <Divider mb={2} />
+      </VStack>
     </Box>
   );
 };

app/components/__tests__/heading.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Heading from "../heading";
+import { ChakraProvider } from "@chakra-ui/react";
+
+describe("Heading component", () => {
+  const renderComponent = () =>
+    render(
+      <ChakraProvider>
+        <Heading />
+      </ChakraProvider>
+    );
+
+  test("renders the heading with the correct text", () => {
+    renderComponent();
+    const firstPart = screen.getByText(/Learn about/i);
+    const secondPart = screen.getByText(/your home’s earthquake readiness\./i);
+    expect(firstPart).toBeInTheDocument();
+    expect(secondPart).toBeInTheDocument();
+  });
+
+  test("highlights the correct text with yellow color", () => {
+    renderComponent();
+    const highlightedText = screen.getByText(/Learn about/i);
+    expect(highlightedText).toHaveStyle({ color: "yellow" });
+  });
+});

app/components/__tests__/search-bar.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import SearchBar from "../search-bar";
+import { ChakraProvider } from "@chakra-ui/react";
+
+describe("SearchBar component", () => {
+  const renderComponent = () =>
+    render(
+      <ChakraProvider>
+        <SearchBar />
+      </ChakraProvider>
+    );
+
+  test("renders search icon with correct color", () => {
+    renderComponent();
+    const icon = screen.getByTestId("search-icon");
+    expect(icon).toHaveStyle({ color: "#2C5282" });
+  });
+
+  test("renders the input field with the correct placeholder", () => {
+    renderComponent();
+    const inputElement = screen.getByPlaceholderText(
+      "Search San Francisco address"
+    );
+    expect(inputElement).toBeInTheDocument();
+  });
+});

app/components/heading.tsx

@@ -0,0 +1,17 @@
+import { Highlight, Text } from "@chakra-ui/react";
+
+const Heading = () => {
+  return (
+    <Text
+      textStyle="headerBig"
+      mb="43px"
+      maxW={{ base: "332px", md: "457px", xl: "546px" }}
+    >
+      <Highlight query="Learn about" styles={{ color: "yellow" }}>
+        Learn about your home’s earthquake readiness.
+      </Highlight>
+    </Text>
+  );
+};
+
+export default Heading;

app/components/search-bar.tsx

@@ -0,0 +1,29 @@
+import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
+import { IoSearchSharp } from "react-icons/io5";
+
+const SearchBar = () => {
+  return (
+    <InputGroup
+      maxW={{ base: "303px", sm: "303px", md: "371px", lg: "417px" }}
+      size={{ base: "md", md: "lg", xl: "lg" }}
+      data-testid="search-bar"
+    >
+      <InputLeftElement>
+        <IoSearchSharp
+          color="#2C5282"
+          fontSize="1.1em"
+          data-testid="search-icon"
+        />
+      </InputLeftElement>
+      <Input
+        placeholder="Search San Francisco address"
+        p="0 10px 0 48px"
+        borderRadius="50"
+        bgColor="white"
+        focusBorderColor="yellow"
+      />
+    </InputGroup>
+  );
+};
+
+export default SearchBar;

app/page.tsx

@@ -1,22 +1,22 @@
-import { Box, Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Highlight, Text } from "@chakra-ui/react";
+import SearchBar from "./components/search-bar";
+import Heading from "./components/heading";
 
 const Home = () => {
   return (
     <Flex direction="column">
       <Box bgColor="blue">
         <Box
-          h={{ base: "166px", md: "213px", xl: "261px" }}
           w={{ base: "base", xl: "xl" }}
           p={{
             base: "45px 23px 50px 23px",
-            md: "52px 27px 56px 26px",
-            xl: "53px 127px 46px 127px",
+            md: "52px 260px 56px 26px",
+            xl: "53px 470px 46px 127px",
           }}
           m="auto"
         >
-          <Box h="100%" border="1px solid" borderColor="grey.400">
-            <Text textStyle="headerBig">Header and search box</Text>
-          </Box>
+          <Heading />
+          <SearchBar />
         </Box>
       </Box>
       <Box

package.json

@@ -30,6 +30,7 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "5.3.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
   },
@@ -43,4 +44,4 @@
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.3.3"
   }
-}
+}

styles/theme.ts

@@ -14,6 +14,7 @@ const customTheme = extendTheme({
     headerBig: {
       fontSize: ["4xl", "4xl", "5xl", "5xl", "6xl", "6xl"],
       fontWeight: "normal",
+      lineHeight: ["40px", "40px", "48px", "48px", "60px", "60px"],
       color: "white",
     },
     headerMedium: {