Skip to content

Refactor template & platform setup UI layout #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jelledb wants to merge 1 commit into
base: main
Choose a base branch
from
+142 −180
Open

Refactor template & platform setup UI layout #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 49 additions & 43 deletions website/src/app/features/platform-integration/platform-integration.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,58 +35,64 @@ <h1 class="text-2xl lg:text-3xl font-bold text-slate-900">Integrate {{ platform.
<div class="container mx-auto px-4 lg:px-8 py-8">
<!-- Integration Guide + How To + Terraform Snippet Combined -->
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-[0.8fr_1.5fr] gap-6 items-start">
<mst-card label="Quick Start" class="h-fit">
<div class="px-5 py-6 max-w-none text-base" card-body>
<h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
<i class="fa-solid fa-rocket text-primary-600"></i>
Quick Start
</h2>
<div class="space-y-4">
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">1</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Add the OpenTofu snippet</div>
<div class="text-slate-600 text-sm">Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.</div>
<mst-card label="Quick Start" class="w-full">
<div class="px-5 py-6 max-w-none text-base" card-body>
<div class="grid grid-cols-1 md:grid-cols-[0.8fr_1.5fr] gap-6">
<!-- Left Column: Quick Start Steps -->
<div>
<h2 class="text-xl font-bold text-slate-900 flex items-center gap-2 mb-4">
<i class="fa-solid fa-rocket text-primary-600"></i>
Quick Start with Code
<span class="badge badge-primary text-xs font-semibold">Recommended</span>
</h2>
<div class="space-y-4">
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">1</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Add the OpenTofu snippet</div>
<div class="text-slate-600 text-sm">Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.</div>
</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">2</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Provider setup and configure variables</div>
<div class="text-slate-600 text-sm">
Ensure you enter your API key in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">provider</span> block and update the required variables in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">locals</span> block as needed for your environment.
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">2</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Provider setup and configure variables</div>
<div class="text-slate-600 text-sm">
Ensure you enter your API key in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">provider</span> block and update the required variables in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">locals</span> block as needed for your environment.
</div>
</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">3</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Deploy with OpenTofu</div>
<div class="text-slate-600 text-sm">Run <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu init</span>, <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu plan</span>, and <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu apply</span> to provision the integration.</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">3</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Deploy with OpenTofu</div>
<div class="text-slate-600 text-sm">Run <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu init</span>, <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu plan</span>, and <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu apply</span> to provision the integration.</div>
</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-base font-bold">✓</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Success!</div>
<div class="text-slate-600 text-sm">The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-base font-bold">✓</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Success!</div>
<div class="text-slate-600 text-sm">The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.</div>
</div>
</div>
</div>
</div>

<!-- Right Column: Code -->
<div class="relative w-full overflow-hidden">
<button
(click)="copyTerraform(platform.terraformSnippet!!)"
class="absolute top-3 right-3 btn btn-xs btn-primary z-10 font-bold flex items-center gap-2"
[class.btn-success]="copiedTerraform">
<i class="fa-solid" [class.fa-check]="copiedTerraform" [class.fa-copy]="!copiedTerraform"></i>
<span>{{ copiedTerraform ? 'Copied!' : 'Copy' }}</span>
</button>
<pre class="bg-slate-900 text-slate-100 p-2 md:p-3 rounded-xl border border-slate-200 overflow-x-auto text-xs md:text-sm mt-0 w-full whitespace-pre"><code class="language-hcl" highlight>{{ platform?.terraformSnippet }}</code></pre>
</div>
</div>
</mst-card>
<div class="relative w-full overflow-hidden">
<button
(click)="copyTerraform(platform.terraformSnippet!!)"
class="absolute top-3 right-4 btn btn-xs btn-primary z-10 font-bold flex items-center gap-2"
[class.btn-success]="copiedTerraform">
<i class="fa-solid" [class.fa-check]="copiedTerraform" [class.fa-copy]="!copiedTerraform"></i>
<span>{{ copiedTerraform ? 'Copied!' : 'Copy' }}</span>
</button>
<pre class="bg-slate-900 text-slate-100 p-2 md:p-3 rounded-xl border border-slate-200 overflow-x-auto text-xs md:text-sm mt-0 w-full whitespace-pre"><code class="language-hcl" highlight>{{ platform?.terraformSnippet }}</code></pre>
</div>
</div>
</mst-card>
</div>
</div>
</div>
Expand Down
Loading
Loading