fixed service formatting and added new font

frontend-sublet/README.md

@@ -17,3 +17,8 @@ Welcome to the Penn Mobile Subletting Feature! This innovative marketplace is de
 To run the Penn Mobile Subletting Feature locally, just do:
 
 `npm run dev`
+
+
+## Attributions:
+
+Font: [Satoshi](https://www.fontshare.com/fonts/satoshi) by Indian Type Foundry (ITF) - [ITF Free Font License (FFL)](https://www.fontshare.com/licenses/itf-free-font-license)

frontend-sublet/app/dashboard/page.tsx

@@ -8,47 +8,13 @@ import { PropertyInterface } from "@/interfaces/Property";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
-
-import { PlusIcon, DotsHorizontalIcon as Dots } from "@radix-ui/react-icons";
-
-import { BellIcon, CheckIcon } from "@radix-ui/react-icons";
-
-import Image from "next/image";
-
-import { cn } from "@/lib/utils";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Switch } from "@/components/ui/switch";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+
+import { PlusIcon } from "@radix-ui/react-icons";
 
 import PropertyList from "@/components/custom/PropertyList";
 
+import PropertyForm from "@/components/custom/PropertyForm";
+
 const Dashboard = () => {
   const [properties, setProperties] = useState<PropertyInterface[]>([]);
 
@@ -65,63 +31,30 @@ const Dashboard = () => {
   return (
     <div className="">
       <Tabs defaultValue="posted" className="">
+
         <div className="w-screen flex justify-end p-6 gap-4">
           <TabsList>
             <TabsTrigger value="posted">Posted</TabsTrigger>
             <TabsTrigger value="drafts">Drafts</TabsTrigger>
           </TabsList>
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button className="p-2">
-                <PlusIcon className="w-5" />
-              </Button>
-            </SheetTrigger>
-            <SheetContent>
-              <SheetHeader>
-                <SheetTitle>Edit profile</SheetTitle>
-                <SheetDescription>
-                  Make changes to your profile here. Click save when you're
-                  done.
-                </SheetDescription>
-              </SheetHeader>
-              <div className="grid gap-4 py-4">
-                <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="name" className="text-right">
-                    Name
-                  </Label>
-                  <Input
-                    id="name"
-                    value="Pedro Duarte"
-                    className="col-span-3"
-                  />
-                </div>
-                <div className="grid grid-cols-4 items-center gap-4">
-                  <Label htmlFor="username" className="text-right">
-                    Username
-                  </Label>
-                  <Input
-                    id="username"
-                    value="@peduarte"
-                    className="col-span-3"
-                  />
-                </div>
-              </div>
-              <SheetFooter>
-                <SheetClose asChild>
-                  <Button type="submit">Save changes</Button>
-                </SheetClose>
-              </SheetFooter>
-            </SheetContent>
-          </Sheet>
+          <PropertyForm>
+            <Button className="p-2">
+              <PlusIcon className="w-5" />
+            </Button>
+          </PropertyForm>
         </div>
-        <TabsContent value="posted" className="p-6">
-          <div className="flex flex-col justify-center space-y-10">
-            <h1 className="text-4xl pl-20 tracking-tighter font-semibold">
-              Dashboard
+
+
+        <TabsContent value="posted" className="p-12">
+          <div className="flex flex-col justify-center space-y-12">
+            <h1 className="text-4xl pl-20 tracking-tight font-bold">
+              Your Listings
             </h1>
             <PropertyList properties={properties} />
           </div>
         </TabsContent>
+
+
         <TabsContent value="drafts" className="p-6">
           <div className="pl-20 space-y-10">
             <h1 className="text-4xl tracking-tighter font-semibold">

frontend-sublet/app/layout.tsx

@@ -1,9 +1,16 @@
 import type { Metadata } from "next";
+
+import localFont from "next/font/local";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
+const satoshi = localFont({
+  src: '../fonts/satoshi/Satoshi-Variable.woff2',
+  display: 'swap',
+})
+
 export const metadata: Metadata = {
   title: "Sublet@Portal",
   description: "Welcome to Sublet@Portal. The best place to sublet your room to other students!",
@@ -16,8 +23,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        <div className="tracking-tight">
+      <body className={satoshi.className}>
+        <div className="">
           {children}
         </div>
       </body>

frontend-sublet/components/custom/Property.tsx

@@ -62,7 +62,7 @@ const Property: React.FC<PropertyProps> = ({ property }) => {
             <Image
               className="rounded-lg select-none"
               draggable="false"
-              src={property.images[0].image_url}
+              src={"/hamco.jpeg"}
               alt="Property image"
               width={400}
               height={400}

frontend-sublet/components/custom/PropertyForm.tsx

@@ -0,0 +1,68 @@
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface PropertyFormProps {
+  children: React.ReactNode;
+}
+
+const PropertyForm = ({ children }: PropertyFormProps) => {
+  return (
+    <div>
+      <Sheet>
+        <SheetTrigger asChild>
+          {children}
+        </SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>
+              Make changes to your profile here. Click save when you're
+              done.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                Name
+              </Label>
+              <Input
+                id="name"
+                value="Pedro Duarte"
+                className="col-span-3"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="username" className="text-right">
+                Username
+              </Label>
+              <Input
+                id="username"
+                value="@peduarte"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button type="submit">Save changes</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  )
+}
+
+export default PropertyForm

frontend-sublet/components/custom/PropertyList.tsx

@@ -7,14 +7,13 @@ interface PropertyListProps {
 
 const PropertyList: React.FC<PropertyListProps> = ({ properties }) => {
   return (
-    <div className="grid xl:grid-cols-3 xl:max-w-[76rem] lg:grid-cols-2 sm:grid-cols-1 gap-5">
+    <ul className="grid xl:grid-cols-3 xl:max-w-[76rem] lg:grid-cols-2 sm:grid-cols-1 gap-5 list-none">
       {properties.map((property) => (
         <li key={property.id}>
-          <div>Hi</div>
           <Property property={property} />
         </li>
       ))}
-    </div>
+    </ul>
   );
 };