Made files structures and some styling

Author: technoph1le

src/App.tsx

@@ -0,0 +1,29 @@
+import Footer from "./layouts/Footer";
+import Header from "./layouts/Header";
+import Sidebar from "./layouts/Sidebar";
+import SnippetList from "./layouts/SnippetList";
+
+const App = () => {
+  return (
+    <div className="container">
+      <Header />
+      <div className="heading">
+        <h1 className="main-title">
+          Made to save your <span className="text-highlight">time.</span>
+        </h1>
+        <p>
+          Find the necessary snippet in seconds, across multiple languages. Just
+          search and copy!
+        </p>
+      </div>
+      <main>
+        <Sidebar />
+        <SnippetList />
+      </main>
+      <hr className="divider" />
+      <Footer />
+    </div>
+  );
+};
+
+export default App;

src/components/Button.tsx

@@ -4,18 +4,42 @@ type ButtonProps = {
   as?: "button" | "link";
   href?: string;
   children: ReactNode;
+  className?: string;
 };
 
-const Button = ({ as = "button", href, children, ...props }: ButtonProps) => {
+type IconButtonProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+const Button = ({
+  as = "button",
+  href,
+  className,
+  children,
+  ...props
+}: ButtonProps) => {
   return as === "button" ? (
-    <button className="button" {...props}>
+    <button className={`button ${className}`} {...props}>
       {children}
     </button>
   ) : (
-    <a className="button" href={href} {...props}>
+    <a className={`button ${className}`} href={href} {...props}>
       {children}
     </a>
   );
 };
 
+export const IconButton = ({
+  className,
+  children,
+  ...props
+}: IconButtonProps) => {
+  return (
+    <button className={`button--icon ${className}`} {...props}>
+      {children}
+    </button>
+  );
+};
+
 export default Button;

src/components/Category.tsx

@@ -0,0 +1,11 @@
+import { CategoryProps } from "../types";
+
+const Category = ({ title }: CategoryProps) => {
+  return (
+    <li>
+      <a href="#">{title}</a>
+    </li>
+  );
+};
+
+export default Category;

src/components/CategoryList.tsx

@@ -0,0 +1,32 @@
+import { CategoryProps } from "../types";
+import Category from "./Category";
+
+const CategoryList = () => {
+  const sampleData: CategoryProps[] = [
+    {
+      title: "DOM Manipulation",
+    },
+    {
+      title: "API Requests",
+    },
+    {
+      title: "Local Storage",
+    },
+    {
+      title: "Performance Optimization",
+    },
+    {
+      title: "Date and Time",
+    },
+  ];
+
+  return (
+    <ul role="list">
+      {sampleData.map((category) => (
+        <Category {...category} />
+      ))}
+    </ul>
+  );
+};
+
+export default CategoryList;

src/components/Icons.tsx

@@ -0,0 +1,15 @@
+import slugify from "../utils/slugify";
+
+const LanguageSwitch = () => {
+  const sampleData = ["JavaScript", "Python", "Java"];
+
+  return (
+    <select id="languages">
+      {sampleData.map((lan) => (
+        <option value={slugify(lan)}>{lan}</option>
+      ))}
+    </select>
+  );
+};
+
+export default LanguageSwitch;

src/components/LanguageSwitch.tsx

@@ -0,0 +1,23 @@
+import { SnippetCardProps } from "../types";
+import { IconButton } from "./Button";
+import { CopyIcon, ExpandIcon } from "./Icons";
+
+const SnippetCard = ({ title }: SnippetCardProps) => {
+  return (
+    <li className="snippet">
+      <div className="snippet__preview">
+        <IconButton className="snippet__copy">
+          <CopyIcon />
+        </IconButton>
+      </div>
+      <div className="snippet__content">
+        <h3>{title}</h3>
+        <IconButton>
+          <ExpandIcon />
+        </IconButton>
+      </div>
+    </li>
+  );
+};
+
+export default SnippetCard;

src/components/SnippetCard.tsx

@@ -1,7 +1,7 @@
-import Button from "../ui/Button";
-import { GitHubIcon } from "../ui/Icons";
-import Logo from "../ui/Logo";
-import SearchInput from "../ui/SearchInput";
+import Button from "../components/Button";
+import { GitHubIcon } from "../components/Icons";
+import Logo from "../components/Logo";
+import SearchInput from "../components/SearchInput";
 
 const Header = () => {
   return (

src/layouts/Header.tsx

@@ -0,0 +1,13 @@
+import CategoryList from "../components/CategoryList";
+import LanguageSwitch from "../components/LanguageSwitch";
+
+const Sidebar = () => {
+  return (
+    <aside>
+      <LanguageSwitch />
+      <CategoryList />
+    </aside>
+  );
+};
+
+export default Sidebar;

src/layouts/Sidebar.tsx

@@ -0,0 +1,26 @@
+import SnippetCard from "../components/SnippetCard";
+import { SnippetCardProps } from "../types";
+
+const SnippetList = () => {
+  const sampleData: SnippetCardProps[] = [
+    {
+      title: "GET Request",
+    },
+    {
+      title: "POST Request",
+    },
+  ];
+
+  return (
+    <section>
+      <h2>API Requests</h2>
+      <ul role="list">
+        {sampleData.map((snippet) => (
+          <SnippetCard {...snippet} />
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default SnippetList;