Updated frontend direcotry structure

frontend/src/components/button.tsx

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+const Button = () => {
+    return (
+        <button>
+            Click me
+        </button>
+    );
+};
+
+export default Button;

frontend/src/components/stickies.css

@@ -0,0 +1,7 @@
+.stickies-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  padding: 24px;
+}

frontend/src/components/stickies.tsx

@@ -0,0 +1,20 @@
+import { useGetStickies } from '../api/api';
+import Sticky from './sticky';
+import './stickies.css';
+
+const Stickies = () => {
+  const { data, isLoading, error } = useGetStickies();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div className="stickies-grid">
+      {data?.map((sticky) => (
+        <Sticky key={sticky.id} sticky={sticky} />
+      ))}
+    </div>
+  );
+};
+
+export default Stickies;

frontend/src/components/sticky.tsx

@@ -0,0 +1,43 @@
+import type { Sticky as StickyType } from '../types/types';
+
+const COLOR_MAP: Record<string, string> = {
+  yellow: '#fdfd96',
+  blue: '#a2d2ff',
+  green: '#b5ead7',
+  pink: '#ffb7ce',
+  purple: '#cdb4db',
+  orange: '#ffc09f',
+};
+
+type StickyProps = {
+  sticky: StickyType;
+};
+
+const Sticky = ({ sticky }: StickyProps) => {
+  const backgroundColor = COLOR_MAP[sticky.color] || '#fdfd96';
+
+  return (
+    <div
+      style={{
+        backgroundColor,
+        width: '180px',
+        minHeight: '180px',
+        padding: '16px',
+        borderRadius: '2px',
+        boxShadow: '2px 4px 8px rgba(0, 0, 0, 0.15)',
+        fontFamily: "'Patrick Hand', cursive, system-ui",
+        fontSize: '14px',
+        lineHeight: '1.4',
+        color: '#333',
+        display: 'flex',
+        alignItems: 'flex-start',
+        wordBreak: 'break-word',
+        transform: `rotate(${Math.random() * 4 - 2}deg)`,
+      }}
+    >
+      {sticky.text}
+    </div>
+  );
+};
+
+export default Sticky;