feat: added simple example (#6)

raphaelsalaja · Oct 6, 2023 · 1efce86 · 1efce86
1 parent 67360e0
commit 1efce86
Show file tree

Hide file tree

Showing 15 changed files with 273 additions and 36 deletions.
diff --git a/...ets.xcassets/Image.imageset/Contents.json → ...ssets.xcassets/Dog.imageset/Contents.json b/...ets.xcassets/Image.imageset/Contents.json → ...ssets.xcassets/Dog.imageset/Contents.json
@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "Capture-2023-10-01-155231.png",
+      "filename" : "Dog.jpg",
       "idiom" : "universal",
       "scale" : "1x"
     },

diff --git a/Layers/Assets.xcassets/Dog.imageset/Dog.jpg b/Layers/Assets.xcassets/Dog.imageset/Dog.jpg
diff --git a/Layers/Assets.xcassets/Drake.imageset/Contents.json b/Layers/Assets.xcassets/Drake.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Drake.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Layers/Assets.xcassets/Drake.imageset/Drake.png b/Layers/Assets.xcassets/Drake.imageset/Drake.png
diff --git a/Layers/Assets.xcassets/Image.imageset/Capture-2023-10-01-155231.png b/Layers/Assets.xcassets/Image.imageset/Capture-2023-10-01-155231.png
diff --git a/Layers/Assets.xcassets/Raphael.imageset/Contents.json b/Layers/Assets.xcassets/Raphael.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Raphael.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Layers/Assets.xcassets/Raphael.imageset/Raphael.jpg b/Layers/Assets.xcassets/Raphael.imageset/Raphael.jpg
diff --git a/Layers/Assets.xcassets/Ronaldo.imageset/Contents.json b/Layers/Assets.xcassets/Ronaldo.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Ronaldo.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Layers/Assets.xcassets/Ronaldo.imageset/Ronaldo.jpg b/Layers/Assets.xcassets/Ronaldo.imageset/Ronaldo.jpg
diff --git a/Layers/Assets.xcassets/Smart.imageset/Contents.json b/Layers/Assets.xcassets/Smart.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Smart.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Layers/Assets.xcassets/Smart.imageset/Smart.jpg b/Layers/Assets.xcassets/Smart.imageset/Smart.jpg
diff --git a/Layers/Example/LayerExample.swift b/Layers/Example/LayerExample.swift
@@ -23,7 +23,7 @@ struct LayerExample: View {
             2: AnyView(ExampleContent3()),
         ],
         buttons: [
-            0: [["Cancel": "xmark.circle"], ["Continue": ""]],
+            0: [["Cancel": "xmark.circle"], ["Continue": "checkmark.circle"]],
             1: [["Cancel": "xmark.circle"], ["Continue": "checkmark.circle"]],
             2: [["Cancel": "xmark.circle"], ["Continue": "checkmark.circle"]],
         ]
@@ -36,19 +36,6 @@ struct LayerExample: View {
 
             layers.getCurrentContent()
                 .id("layer.stack.content.\(layers.index)")
-                .matchedGeometryEffect(
-                    id: "layer.image.content",
-                    in: LayerConstants.namespace
-                )
-                .transition(
-                    .asymmetric(
-                        insertion:
-                        .opacity.animation(.default.delay(0.30))
-                            .combined(
-                                with: .scale(scale: 0.9).animation(.default.delay(0.30))),
-                        removal: .opacity
-                    )
-                )
 
             HStack {
                 if !layers.getCurrentButtons()[0].isEmpty {
@@ -62,7 +49,7 @@ struct LayerExample: View {
                 if !layers.getCurrentButtons()[1].isEmpty {
                     LayerButton(text: Binding.constant(layers.getCurrentButtons()[1].keys.first ?? ""),
                                 icon: Binding.constant(layers.getCurrentButtons()[1].values.first ?? ""),
-                                background: .green)
+                                background: .blue)
                     {
                         layers.next()
                     }
@@ -74,6 +61,20 @@ struct LayerExample: View {
 
 // MARK: - Preview
 
+struct LayerExamplePreview: View {
+    var body: some View {
+        ZStack {
+            Color(.black.opacity(0.25))
+                .ignoresSafeArea()
+                .zIndex(1)
+
+            LayerExample()
+                .zIndex(2)
+        }
+    }
+}
+
+
 #Preview() {
     ZStack {
         Color(.black.opacity(0.25))

diff --git a/Layers/Example/LayerExampleComponents.swift b/Layers/Example/LayerExampleComponents.swift
@@ -5,6 +5,7 @@
 //  Created by Raphael Salaja on 06/10/2023.
 //
 
+import MapKit
 import SwiftUI
 
 // MARK: - Example Text Fields
@@ -34,11 +35,11 @@ struct ExampleTextField: View {
 
     var body: some View {
         TextField(placeholder, text: $input, axis: .vertical)
-            .font(.system(.body, design: .rounded).weight(.medium))
-            .multilineTextAlignment(.leading)
             .padding(20)
-            .foregroundColor(Color(.label))
-            .background(Color(.systemGray6))
+            .font(.system(.body, design: .rounded, weight: .bold))
+            .multilineTextAlignment(.leading)
+            .foregroundStyle(.secondary)
+            .background(Color(.tertiarySystemFill))
             .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
             .lineLimit(variation.rawValue, reservesSpace: true)
     }
@@ -83,7 +84,7 @@ struct ExampleHeader1: View {
                 )
 
             FullWidthText(center: true) {
-                Text("Heading 1")
+                Text("Share Post")
                     .fixedSize()
                     .font(.system(.title3, design: .rounded, weight: .bold))
                     .multilineTextAlignment(.leading)
@@ -109,7 +110,7 @@ struct ExampleHeader2: View {
     var body: some View {
         HStack {
             FullWidthText {
-                Text("Heading 2")
+                Text("Attach Message")
                     .fixedSize()
                     .font(.system(.title3, design: .rounded, weight: .bold))
                     .multilineTextAlignment(.leading)
@@ -141,7 +142,7 @@ struct ExampleHeader3: View {
                 )
 
             FullWidthText(center: true) {
-                Text("Heading 3")
+                Text("Confirm Post")
                     .fixedSize()
                     .font(.system(.title3, design: .rounded, weight: .bold))
                     .multilineTextAlignment(.leading)
@@ -165,27 +166,178 @@ struct ExampleHeader3: View {
 
 struct ExampleContent1: View {
     var body: some View {
-        VStack {
-            RoundedRectangle(cornerRadius: 20)
-                .fill(Color(.tertiarySystemFill))
+        VStack(spacing: 16) {
+            HStack(alignment: .top) {
+                VStack(alignment: .leading) {
+                    Text("Name")
+                        .font(.system(.footnote, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+
+                    Text("Smart Reaction")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.primary)
+                }
+
+                Spacer()
+
+                VStack(alignment: .trailing) {
+                    Text("Format")
+                        .font(.system(.footnote, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+
+                    Text("JPEG")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.primary)
+                }
+            }
+            .padding()
+            .frame(maxWidth: 300)
+            .background(Color(.tertiarySystemFill))
+            .foregroundStyle(.black)
+            .clipShape(RoundedRectangle(cornerRadius: 20))
+            .matchedGeometryEffect(
+                id: "layer.content.image.details",
+                in: LayerConstants.namespace
+            )
+
+            Image(.smart)
+                .resizable()
                 .frame(maxWidth: 300, maxHeight: 300)
+                .clipShape(RoundedRectangle(cornerRadius: 20))
+                .transition(.scale(scale: 1.0))
+                .matchedGeometryEffect(
+                    id: "layer.content.image",
+                    in: LayerConstants.namespace
+                )
+
+            HStack(alignment: .top) {
+                HStack {
+                    Image(systemName: "paperplane")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .foregroundColor(Color(.systemGray))
+
+                    Text("Recipient")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+                }
+
+                Spacer()
+
+                Text("@raphaelsalaja")
+                    .font(.system(.callout, design: .rounded, weight: .bold))
+                    .multilineTextAlignment(.leading)
+                    .foregroundStyle(.primary)
+            }
+            .padding()
+            .frame(maxWidth: 300)
+            .background(Color(.tertiarySystemFill))
+            .foregroundStyle(.black)
+            .clipShape(RoundedRectangle(cornerRadius: 20))
+            .matchedGeometryEffect(
+                id: "layer.content.recipient",
+                in: LayerConstants.namespace
+            )
         }
     }
 }
 
 struct ExampleContent2: View {
     var body: some View {
-        RoundedRectangle(cornerRadius: 20)
-            .fill(Color(.tertiarySystemFill))
-            .frame(maxWidth: 300, maxHeight: 300)
+        VStack(spacing: 16) {
+            ExampleTextField(input: "", placeholder: "Something meaningful...", variation: .extraLarge)
+                .matchedGeometryEffect(
+                    id: "layer.content.texfield",
+                    in: LayerConstants.namespace
+                )
+        }
     }
 }
 
 struct ExampleContent3: View {
     var body: some View {
-        RoundedRectangle(cornerRadius: 20)
-            .fill(Color(.tertiarySystemFill))
-            .frame(maxWidth: 300, maxHeight: 300)
+        VStack(spacing: 16) {
+            HStack(alignment: .top) {
+                HStack {
+                    Image(systemName: "paperplane")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .foregroundColor(Color(.systemGray))
+
+                    Text("Recipient")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+                }
+
+                Spacer()
+
+                Text("@raphaelsalaja")
+                    .font(.system(.callout, design: .rounded, weight: .bold))
+                    .multilineTextAlignment(.leading)
+                    .foregroundStyle(.primary)
+            }
+
+            Divider()
+
+            HStack {
+                VStack(alignment: .leading) {
+                    Text("Name")
+                        .font(.system(.footnote, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+
+                    Text("Smart Reaction")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.primary)
+                }
+
+                Spacer()
+
+                VStack(alignment: .trailing) {
+                    Text("Format")
+                        .font(.system(.footnote, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+
+                    Text("JPEG")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.primary)
+                }
+            }
+
+            Divider()
+
+            VStack(alignment: .leading) {
+                FullWidthText {
+                    Text("Message")
+                        .font(.system(.footnote, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.secondary)
+                }
+
+                FullWidthText {
+                    Text("Sending this with lots of love, tell your friends I said hi.")
+                        .font(.system(.callout, design: .rounded, weight: .bold))
+                        .multilineTextAlignment(.leading)
+                        .foregroundStyle(.primary)
+                }
+            }
+        }
+        .padding()
+        .frame(maxWidth: 300)
+        .background(Color(.tertiarySystemFill))
+        .foregroundStyle(.black)
+        .clipShape(RoundedRectangle(cornerRadius: 20))
+        .matchedGeometryEffect(
+            id: "layer.content.final",
+            in: LayerConstants.namespace
+        )
     }
 }